2020-微信小程序开发学习笔记
文档
文档地址
小程序提供了一个简单、高效的应用开发框架和丰富的组件及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中编写如下代码
<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;
}
<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>
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)
})
},