一、组件及基础属性介绍

1、属性介绍

属性	含义
text	文本
view	区域
button	按钮
input	表单
image	图片
include	包含
import	导入
web-view	导入html页面

2、容器组件

属性	含义
view	试图区域
swiper、swiper-item	幻灯片、轮播图
scroll-view	滚动试图

3、基础容器

1、text 介绍:user-select可选文字

2、rich-text 富文本

3、icon 图标

4、表单

button 介绍:type、size、自定义
input 输入
textarea 文本区域
switch

5、navigator 导航

open-type 介绍:redirect、switch-tap、navigate、relunch
url

6、媒体

image 介绍:src mode模式 lazy-load懒加载
video 视频

7、其他

map 地图
web-view web试图

二、模板语法介绍

1、文本渲染

{{}}

2、条件渲染

wx:if="{{}}"

wx:elif="{{}}"

wx:else

3、列表渲染

wx:for="{{list}}"、{{item}}、{{index}}

wx:key="title"

4、自定义列表

wx:for="{{list}}"

wx:for-item="myitem"

wx:for-index="ind"

5、import

1、定义模板 test.wxml

<temp name="user">
<view>用户名：{{name}}</view>

2、使用

<import src="xxx/test.wxml">
<template is="use" data={{...userInfo}}>

6、include

拷贝src中非template的内容

属性	含义
bindtap	触摸/点击
bindchange	值发生变化
bindconfrim	确定
bindinput	输入变化

四、表单的双向绑定

<input value="{{temp}}" bindinput="inputHd">
this.setData({temp:e.detail.value})
获取事件对应表单的值
e.detail.value

五、事件的传参数

<button bindtap="showMsg" data-msg=“你好，靓”>
showMsg(e){e.target.dataset.msg
}

六、响应式更新

this.setData({temp:''})

数据与试图都会更新

七、wx的api

1、微信内置的方法

wx.showToast({title:"",icon:})
//弹出土司提升
wx.showLoading()
wx.request()
//网络请求工具
wx.stopPullDownRefresh()
//停止下拉刷新
wx.setStorageSync(key,value)
wx.getStorageSync(key)//本次存、取

八、配置

1、全局配置

2、页面配置

 "backgroundTextStyle": "light",
背景文字颜色 light | dark"navigationBarBackgroundColor": "#f70",
背景颜色"navigationBarTitleText": "小程序基础语法",
导航栏表情"navigationBarTextStyle": "white"
导航栏+状态栏文字颜色  white | black"enablePullDownRefresh": true,
允许页面下拉刷新"usingComponents": {}
使用组件

九、页面声明

属性	含义
onLoad	页面加载
onPullDownRefresh	下拉刷新
onReachBottom	触底

十、页面跳转

1、组件(navigator)

2、open-type

属性	含义
navigate	跳转
redirect	重定向
switchTab	切换底部栏
navigateBack

3、js进行跳转

属性	含义
wx.navigateTo	跳转
wx.switchTab	底部栏切换
wx.redirectTo	重定向
wx.navigateBack()	返回

十一、小程序页面栈

1、小程序默认会缓存5个页面栈

2、页面跳转

属性	含义
navigate	添加一个缓存页面栈
navigateBack	移除一个页面栈
redirect	替换一个一个页面栈

十二、页面传参

1、传递参数

<navigator url="xxxx?docid=yyyy&title=zzz"

2、获取参数

onLoad(options){//options.docid,options.title
}

十三、npm使用 weapp为例

1、在项目的根目录 npm init -y初始化项目

2、npm i @vant/weapp -S --production 安装

3、构建npm编辑器->工具->构建npm

4、修改app.js

注册组件
"usingComponents": {"van-button": "@vant/weapp/button/index"},

5、修改project.config.json setting

"packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram/"}],

6、在组件中使用

<van-button type="info">主要按钮</van-button>

十四、小程序的生命周期

1、onLaunch 启动

2、onShow 前台显示

3、onHide 后台运行

十五、页面的声明周期

1、介绍

属性	含义
onLoad	加载、可以获取页面传递的参数
onShow	前台显示、开始播放视频
onReady	初次渲染完毕、操作组件或者dom
onHide	隐藏、停止播放
onUnload	卸载

十六、全局数据

1、app.js

定义全局数据globalData: {    num:5}

2、页面

1、获取app

const app = getApp();

2、介绍

属性	含义
onShow	全局数据更新本地数据
this.setData({count:app.globalData.num})

3、代码

// 更新时候要更新本地和全局addCount(){// 更新本地countthis.setData({count:this.data.count+1})// 更新全局的numapp.globalData.num +=1},

十七、自定义组件

1、步骤

1、创建一个组件

2、在页面中注册组件

 "usingComponents": {"item":"/components/item/item"}

3、在页面中使用组件

2、组件的构造函数(Component)

属性	含义
extemalClasses	外部类
properties	父组件传入的属性(参数)
data	组件内部的数据
methods	组件的方法

3、组件的传参(父传子)

1、父页面

<item title="收藏夹">

2、子组件接收

properies：{title:{type:String,value:''}
}
子组件页面wxml使用
{{title}}
子组件js的methods中使用
this.data.title

3、子传父

子组件js
this.triggerEvent("toggle",{value:true})
父组件。wxml
<item bind:toggle="toogleHd">
父组件.js
toggleHd(e){//获取e.detial.value
}

4、外部类

子组件.jsexternalClasses:[item-class]
子组件.wxml
<view class="item item-class">
父组件wxml传入
<item item-class="myItem">
父组件.wxss
.myItem{ height:100rpx !important!;color:red;}

十八、wx

1、登录

1、getUserProfile只能获取到用户的头像和昵称，不能作为唯一标识符合与后端进行交互

01、wx.login() 获取code把code发送给自己服务器（也可以加userInfo）

02、自己的服务器向微信服务器发送code+appid+AppSecret换取唯一标识符 openid

03、通过openid可以实现登录，注册，权限等功能

2、回到顶部/固定位置

  wx.pageScrollTo({duration: 500, //时间scrollTop:0, //位置})wx.pageScrollTo({duration: 500,selector:".share"       })

3、监听滚动(onPageScroll)

4、获取设置/窗口信息(wx.getSystemlnfoSync())

5、获取电量(wx.getBatterylnfoSync())

6、获取网络状态(wx.getNetworkType())

7、打电话/发短信

 wx.makePhoneCall({phoneNumber: '13598859747',})

8、下载网络图片(权限)

 wx.downloadFile()wx.saveImageToPhotosAlbum()
//保存到相册

9、上传图片

 wx.chooseMedia({count:1})wx.uploadFile({filePath: res.tempFiles[0].tempFilePath
})

10、设置标题

 wx.setNavigationBarTitle({title: '自定义组件',})

十九、小程序的限制

1、打包上传每个每个包不超过2M 总大小16M

2、本地存储每次1M 总大小10/0M

3、底部栏2-5个

4、页面栈5个

二十、分包

1、介绍

打开小程序,默认值下载主包

小程序的打开速度加快

通过分包可以让项目更加庞大

2、分包

"subpackages": [{"root": "news","pages": ["pages/detail/detail"]}],

3、分包预加载

"preloadRule": {"pages/jok/jok": {"network": "all","packages": ["news"]}},

二十一、插件使用(wxParse)

1、作用:html转换为wx的组件

2、Copy文件夹

3、在页面js导入文件(地址是否正确)

var WxParse = require('../../wxParse/wxParse.js');

4、导入css

@import "/wxParse/wxParse.wxss";

5、引用数据

var that = this;
WxParse.wxParse('article', 'html', res.result.content, that, 5);

6、导入使用模板

<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

二十二、云开发

1、概念

云数据库(moogoDB)

云函数(nodejs)

云存储

2、作用:

让前端脱离后端直接连接数据库和存储

写好nodejs、根据一定的规则操作业务数据,连接数据库

在吧nodejs上传到云端

在客户端调用nodejs对应的方法,获取服务器数据

3、云函数定义

1、config配置

2、package.json 包管理

3、js逻辑

01 导入wx 的sdk 初始化云
const cloud = require('wx-server-sdk')
cloud.init()02 导入数据库
const db = cloud.database();03 导出
exports.main = async (event, context) => {const wxContext = cloud.getWXContext()//当前微信的环境// event 调用函数传入的参数return  {} 返回的数据
})云函数写好要上传到服务器

4、调用云函数

wx.cloud.callFunction({name:"addMsg",data:{}})
.then()
.catch()
name云函数的名称，
data 传入的参数

5、数据库操作

1、查

db.collection(“guest”).get()skip() 跳过orderby("date","desc") 日期从大到小limit ()限制.count() 查询总数

2、增

db.collection("guest").add({data:{}})
// data是添加的数据

3、删除

db.collection("guest").doc(event.id).remove()

6、云文件的操作

1、wx.cloud.uploadFile({})

项目	value
cloudPath	文件名(存储到服务器的)
path	本地缓存文件
success	成功
res.fileID	文件地址

2、wx.chooseMedia({})

count:9 最多选择数量

res.tempFiles[i].tempFilePath

小程序基础、云服务介绍相关推荐

微信小程序快速关闭云服务，9月底就要按使用收费了，抓紧关闭吧
最近收到小程序的通知,说使用了云服务, 慌了神,下个月的饭还能保住嘛? 抓紧关了以绝后患, 上个月刚被AppleStore偷偷扣了688 开发者费用,wc 这个不能再犯了. 认真看操作如下: 要是打不 ...
微信原生小程序基础架构
文章目录微信原生小程序基础架构一.基本目录结构二.登录鉴权部分三.位置授权部分四.版本升级部分五.工具部分 MD5加密六.系统信息部分七.缓存处理八.CSS兼容问题处理与公共样式九 ...
微信小程序基础讲解，云服务介绍，分包及使用方法
一,组件及基础属性介绍 1.属性介绍属性含义 text 文本 view 区域 button 按钮 input 表单 image 图片 include 包含 import 导入 web-view 导 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（四）：搭建服务端数据库
文章目录前言一.连接主机数据库二.创建数据表结构三.准备测试数据专题文章链接前言做完了前面的注册申请工作,今天我们开始进行程序的开发. 这篇文章,我们要完成的是服务端数据库表的创建. 一 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（八）：开发小程序卡片类型呈现功能
文章目录前言一.功能说明二.代码实现 1.创建主界面Page 2.WXML 2.JS 3.WXSS 4.合法域名校验 5.图片缓存刷新问题的解决小结专题文章链接前言本篇文章,将对照专题案 ...
每日优鲜小程序基础组件介绍
每日优鲜小程序基础组件介绍 1.基础组件介绍 2.基础组件的结构与作用 3.基础组件的接入方法初次引入初始化更新与维护基础组件接入 1.基础组件介绍小程序基础组件基于每日优鲜主商城小程序业务 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（十一）：开发小程序设置功能
文章目录前言一.功能说明二.设置界面代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 三.参数控制逻辑代码实现 1.自动跳转卡片 2.自动播放声音专题文章链接前言案例的 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（一）：准备开始
文章目录前言案例说明专题文章链接前言作为一个程序开发的老鸟,有时候想使用微信小程序,开发实现一些实用的小功能.由于小程序往往需要有后台数据的支持,所以一般还需要搭建一个Server服务器,来 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（十二）：开发小程序用户反馈功能
文章目录前言一.功能说明二.代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 专题文章链接前言案例的运行效果,可以扫码观看: 本篇文章,我们将实现应用的用户反馈功能. 一 ...

小程序基础、云服务介绍

一、组件及基础属性介绍

1、属性介绍

2、容器组件

3、基础容器

4、表单

5、navigator 导航

6、媒体

7、其他

二、模板语法介绍

1、文本渲染

2、条件渲染

3、列表渲染

4、自定义列表

5、import

6、include

四、表单的双向绑定

五、事件的传参数

六、响应式更新

七、wx的api

八、配置

九、页面声明

十、页面跳转

十一、小程序页面栈

十二、页面传参

1、传递参数

2、获取参数

十三、npm使用 weapp为例

1、在项目的根目录 npm init -y初始化项目

2、npm i @vant/weapp -S --production 安装

3、构建npm编辑器->工具->构建npm

4、修改app.js

5、修改project.config.json setting

6、在组件中使用

十四、小程序的生命周期

1、onLaunch 启动

2、onShow 前台显示

3、onHide 后台运行

十五、页面的声明周期

1、介绍

十六、全局数据

1、app.js

2、页面

十七、自定义组件

1、步骤

2、组件的构造函数(Component)

3、组件的传参(父传子)

十八、wx

1、登录

2、回到顶部/固定位置

3、监听滚动(onPageScroll)

4、获取设置/窗口信息(wx.getSystemlnfoSync())

5、获取电量(wx.getBatterylnfoSync())

6、获取网络状态(wx.getNetworkType())

7、打电话/发短信

8、下载网络图片(权限)

9、上传图片

10、设置标题

十九、小程序的限制

1、打包上传每个每个包不超过2M 总大小16M

2、本地存储 每次1M 总大小10/0M

3、底部栏2-5个

4、页面栈5个

二十、分包

1、介绍

2、分包

3、分包预加载

二十一、插件使用(wxParse)

1、作用:html转换为wx的组件

2、Copy文件夹

3、在页面js导入文件(地址是否正确)

4、导入css

5、引用数据

6、导入使用模板

二十二、云开发

1、概念

2、作用:

3、云函数定义

4、调用云函数

5、数据库操作

2、本地存储每次1M 总大小10/0M