文档

文档地址

小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。

小程序框架参考文档

小程序组件参考文档

小程序 API 参考文档

小程序服务端 API 参考文档

官方文档

框架接口

Page内的生命周期及各项函数

一键生成Page配置代码，在js文件中输入page,在提示中选择如图所示内容，然后就自动填充配置代码

Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })

事件函数及setData用法

实现鼠标点击事件之后变换view视图中的文字变换

在demo.wxml中编写如下代码

<!--在组件中绑定一个事件处理函数，如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。--> <view bindtap="myTap" data-name="微信小程序" style="width:200rpx;height:200rpx;background:pink;"> {{name}} </view>

在demo.js中

/** * 页面的初始数据 */ data: { name:"tom" }, // 自定义点击事件 myTap: function(res){ var name1=res.currentTarget.dataset.name this.setData({ name:name1 }) }

实现效果，分辨是点击之前(图1-1)和点击之后(图1-2)

自定义组件

Component(Object object)

创建自定义组件，接受一个 Object 类型的参数。

创建方法

在根目录创建components文件夹（只需要在第一次的时候创建）。

在components文件夹下面创建组件名，如zqf，然后在zqf下单击右键，选择新建component。

在创建好的组件的wxml中写出你想显示的内容即可，然后在wxss中编辑样式。

比如首页想要调用zqf组件，那么就需要在index.json中进行配置。

在index.json中的调用方法,属性名是组件名，值就是组件的路径

{ "usingComponents": { "zqf":"/components/zqf/zqf" } }

在index.wxml中就可以使用自定义的组件了，eg:

<zqf></zqf>

传递属性

在自定义组件上传递自定义属性，如：

<PubTitle myTitle="作品"/>

需要来到PubTitle自定义组件的js中，接受该自定义属性。

properties: { //自定义属性名，需要指定type类型(string/number/array/object),指定value默认值 myTitle:{ type:String, value:"" //value值的作用，当传递的属性为空时，页面上渲染出的内容是value的值。 } },

在PubTitle.wxml中渲染从前端传递过来的属性。

<view class="pubTitle"> <view class="txt">{{myTitle}}</view> <navigator class="more">更多 ></navigator> </view>

修改时间戳

示例代码

// 发送网络请求,获取真实的行业动态数据 wx.request({ url: 'https://ku.qingnian8.com/school/list.php', success:res=>{ // console.log(res.data) // 修改时间戳 res.data.forEach(item=>{ var time=item.posttime*1000 //转换成正常日期和时间 var date=new Date(time) var year=date.getFullYear() // 月份默认是0-11，所以要加一 // 三元表达式，判断月份，天数是否大于十，不大于十的时候，前面拼接一个0。 var month=(date.getMonth()+1)<10 ? "0"+(date.getMonth()+1) : (date.getMonth()+1) var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate() // 拼接日期 var posttime=year+"-"+month+"-"+day // console.log(posttime) item.posttime=posttime }) this.setData({ dataList:res.data }) } })

模块化

引入模块。返回模块通过 module.exports 或 exports 暴露的接口

封装一个模块

模块中创建一个common对象包含修改时间戳函数和裁剪标题长度的函数

//位置:/utils/public.js var common={ // 截取标题长度 getStrLen:function(str,len){ if(str.length>len){ return str.substr(0,len)+"..." }else{ return str } }, // 修改时间戳 getMyDate:function (timestamp, formats) { // formats格式包括 // 1. Y-m-d // 2. Y-m-d H:i:s // 3. Y年m月d日 // 4. Y年m月d日 H时i分 formats = formats || 'Y-m-d'; var zero = function (value) { if (value < 10) { return '0' + value; } return value; }; var timestamp=timestamp*1000 var myDate = timestamp? new Date(timestamp): new Date(); var year = myDate.getFullYear(); var month = zero(myDate.getMonth() + 1); var day = zero(myDate.getDate()); var hour = zero(myDate.getHours()); var minite = zero(myDate.getMinutes()); var second = zero(myDate.getSeconds()); return formats.replace(/Y|m|d|H|i|s/ig, function (matches) { return ({ Y: year, m: month, d: day, H: hour, i: minite, s: second })[matches]; }); } // ....可以继续构建其他的函数 } // 返回对象 module.exports=common

引入模块

//位置：/index/index.js //引入模块,使用 相对路径 import common from "../../utils/public.js"

调用模块对象

/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 测试引入common对象是否成功 // console.log(common) // 发送网络请求,获取真实的行业动态数据 wx.request({ url: 'https://ku.qingnian8.com/school/list.php', data:{ // 每次返回的数据个数 num:5, // 返回的页数 page:1 }, success:res=>{ res.data.forEach(item=>{ // 调用common对象的修改时间戳函数 item.posttime=common.getMyDate(item.posttime,"Y-m-d") // 调用common对象的标题裁剪函数 item.title=common.getStrLen(item.title,15) }) this.setData({ dataList:res.data }) } }) },

API

基础语法

页面加载完毕，显示获取设备型号

/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log(wx.getSystemInfoSync().model) },

实现页面加载动画

/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //加载动画 wx.showLoading({ title: '数据加载中....', }) //设置定时器，一定时间后消失 setTimeout(res=>{ wx.hideLoading() },1500) },

显示消息提示框

/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { wx.showToast({ title: '提交成功', }) },

路由

wx.switchTab(Object object)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

示例代码

{ "tabBar": { "list": [{ "pagePath": "index", "text": "首页" },{ "pagePath": "other", "text": "其他" }] } } wx.switchTab({ url: '/index' })

wx.navigateTo(Object object)

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

示例代码

wx.navigateTo({ url: 'test?id=1', events: { // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据 acceptDataFromOpenedPage: function(data) { console.log(data) }, someEvent: function(data) { console.log(data) } ... }, success: function(res) { // 通过eventChannel向被打开页面传送数据 res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' }) } }) //test.js Page({ onLoad: function(option){ console.log(option.query) const eventChannel = this.getOpenerEventChannel() eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'}); eventChannel.emit('someEvent', {data: 'test'}); // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据 eventChannel.on('acceptDataFromOpenerPage', function(data) { console.log(data) }) } })

wx.reLaunch(Object object)

关闭所有页面，打开到应用内的某个页面。需要跳转的应用内页面路径 (代码包路径)，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’。

示例代码

wx.reLaunch({ url: 'test?id=1' }) // test Page({ onLoad (option) { console.log(option.query) } })

wx.navigateBack(Object object)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层

示例代码

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码 // 此处是A页面 wx.navigateTo({ url: 'B?id=1' }) // 此处是B页面 wx.navigateTo({ url: 'C?id=1' }) // 在C页面内 navigateBack，将返回A页面 wx.navigateBack({ delta: 2 })

网络

发起请求

wx.request

发起 HTTPS 网络请求，

案例

示例代码

//demo.js Page({ /** * 页面的初始数据 */ data: { resData:[], num:1 }, //点击切换下一页函数 nextPage: function(){ this.data.num++ this.getList(this.data.num) }, // 封装获取数据函数 getList:function(p=1){ wx.request({ url:'https://edu.newsight.cn/wxList.php', // 传递参数 data:{ num:6, page:p }, success:res=>{ console.log(res) this.setData({ resData:res.data }) } }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 调用数据获取函数 this.getList() }, }) /*demo.wxss*/ .out{ padding: 30rpx; box-sizing: border-box; } .row{ display: flex; height: 150rpx; margin-bottom: 20rpx; } .pic{ flex:2; } .pic image{ width: 100%; height: 100%; } .text{ flex: 8; border-bottom: 1px solid #eee; /* background: #ccc; */ padding-left: 10rpx; display: flex; flex-direction: column; justify-content: space-between; } .text .title{ font-size: 38rpx; } .text .time{ color: #999; } <!--demo.wxml--> <view class="out"> <view class="row" wx:for="{{resData}}" wx:key="index"> <view class="pic"> <image src="{{item.picurl}}" mode="widthFix"></image> </view> <view class="text"> <view class="title">{{item.title}}</view> <view class="time">{{item.posttime}}-{{item.author}}</view> </view> </view> <button type="primary" bindtap="nextPage">下一页</button> </view>

效果如下

云开发

开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。

数据库

增删改查

初始化

const db = wx.cloud.database()

查询

获取一个记录的数据

db.collection("demolist").get({ success:res=>{ console.log(res) } })

查询指定id的数据

db.collection("demolist").doc("b7d9f2ea5efd51bc0030c39e3c7ea616").get({ success:res=>{ console.log(res) } })

插入

可以通过在集合对象上调用 add 方法往集合中插入一条记录。

addData(){ // 数据加载中弹框 wx.showLoading({ title: '数据加载中...', mask:true }) // 添加数据 db.collection("demolist").add({ data:{ title:"test title", author:"zhou", content:"插入数据可以通过在集合对象上调用 add 方法往集合中插入一条记录。还是用待办事项清单的例子，比如我们想新增一个待办事项：" } }).then(res=>{ console.log(res) // 结束数据加载弹框 wx.hideLoading() }) },

通过表单插入数据

<form bindsubmit="btnSub"> <input name= "title" placeholder="请输入标题"></input> <input name= "author" placeholder="请输入作者"></input> <textarea name="content" placeholder="请输入内容"></textarea> <button type="primary" form-type="submit">提交</button> <button form-type="reset">重置</button> </form> // 初始化数据库 const db=wx.cloud.database() // 表单提交，添加进数据库 btnSub(res){ // 解构，方法一 // var {title,author,content}=res.detail.value // db.collection("demolist").add({ // data:{ // title:title, // author:author, // content:content // } // }).then(res=>{ // console.log(res) // }) //方法二 var resVal=res.detail.value db.collection("demolist").add({ data:resVal }).then(res=>{ console.log(res) }) },

查询指令

where

查询某一个字段的数据

db.collection("demolist").where({ author:"lester" }).get().then(res=>{ console.log(res) })

更新

update

更新一个指定id的数据

const db=wx.cloud.database(); //更新数据 updateData(){ db.collection("demolist").doc("bb83ad495efd79ed002a748b6d0dfecb").update({ data:{ author:"qian" } }).then(res=>{ console.log(res) }) },

给指定id添加新的数据

const db=wx.cloud.database(); //更新数据 updateData(){ db.collection("demolist").doc("bb83ad495efd79ed002a748b6d0dfecb").update({ data:{ author:"qian", // 增加的数据 posttime:"2020-10-10" } }).then(res=>{ console.log(res) }) },

set

替换更新一个记录，会将所有内容替换掉，只剩下title。（慎用）

const db=wx.cloud.database(); //替换数据 updateData(){ db.collection("demolist").doc("bb83ad495efd79ed002a748b6d0dfecb").set({ data:{ title:"自动驾驶" } }).then(res=>{ console.log(res) }) },

删除

const db=wx.cloud.database(); // 删除数据 delData(){ db.collection("demolist") .doc("bb83ad495efd79ed002a748b6d0dfecb") .remove() .then(res=>{ console.log(res) }) },

=wx.cloud.database(); //更新数据 updateData(){ db.collection(“demolist”).doc(“bb83ad495efd79ed002a748b6d0dfecb”).update({ data:{ author:“qian”, // 增加的数据 posttime:“2020-10-10” } }).then(res=>{ console.log(res) }) },

##### set >替换更新一个记录，会将所有内容替换掉，只剩下title。（慎用） ```js const db=wx.cloud.database(); //替换数据 updateData(){ db.collection("demolist").doc("bb83ad495efd79ed002a748b6d0dfecb").set({ data:{ title:"自动驾驶" } }).then(res=>{ console.log(res) }) },

删除

const db=wx.cloud.database(); // 删除数据 delData(){ db.collection("demolist") .doc("bb83ad495efd79ed002a748b6d0dfecb") .remove() .then(res=>{ console.log(res) }) },