微信小程序开发第三课

1 wxml语法

1.1 模版语法

#  1 在页面 xx.js 的 Page() 方法的 data 对象中进行声明定义
#  2 在xx.wxml 中使用 {{}} 包裹，显示数据
#  3 可以显示如下，不能编写js语句或js方法-变量-算数运算-三元运算-逻辑判断# 4 只是单纯通过赋值，js中变量会变化，但是wxml中的页面不会变化，没有联动效果，需要使用setData()方法修改- 更新数据- 页面更新# 5 setData案例 修改数字
## 5.1 wxml
<view>
<view>姓名是：{{name}}</view>
<view>年龄是：{{age}}</view>
<button bind:tap="handleAddAge" plain="true" type="primary" size="mini">点击增加年龄</button>
</view>
##5.2 jshandleAddAge(){//this.data.age++console.log(this.data.age)this.setData({age:this.data.age+1})},# 6 setData案例 修改对象
## 6.1 wxml<view>
<view>姓名是：{{userinfo.name}}</view>
<view>年龄是：{{userinfo.age}}</view>
<view>爱好是：{{userinfo.hobby}}</view>
<button bind:tap="handleChangeName" plain="true" type="primary" size="mini">点击修改对象-姓名</button>
</view>## 6.2 jsdata: {name: 'justin',age: 19,userinfo: {name: 'lqz',age: 99}},handleChangeName() {// 增加数据this.setData({'userinfo.hobby': '篮球'})// 修改数据this.setData({'userinfo.name': '彭于晏'})// 修改多个数据--》简便方案--》展开运算符// const userinfo = {//   ...this.data.userinfo,//   name: '新名字',//   hobby: '乒乓球'// }// this.setData({//   // userinfo:userinfo//   userinfo //简写形式// })// 修改多个数据--》简便方案-->assignconst userinfo = Object.assign(this.data.userinfo, {name: 'xxzz',hobby: '烫头'})this.setData({// userinfo:userinfouserinfo //简写形式})//删除数据-->单个delete this.data.userinfo.name // 页面删除不了，需要用setData更新this.setData({userinfo:this.data.userinfo})//删除数据-->多个--解构赋值const {name,age,...res}=this.data.userinfothis.setData({userinfo:res})},# 7 setData 修改数组
## 7.1 js
data: {names:['刘亦菲','迪丽热巴','古力娜扎','马尔扎哈']},handleChangeList(){//1 增加数组// 1.1 增加再设置值this.data.names.push('亚瑟王')this.setData({names:this.data.names})// 1.2 通过数组拼接// const newList=this.data.names.concat("甄姬")// this.setData({//   names:newList// })// 1.3 通过解构赋值const newList=[...this.data.names,"李白"]this.setData({names:newList})// 2 修改数组this.setData({'names[1]':'justin'})// 3 删除数组this.data.names.slice(1)this.setData({names:this.data.names.slice(1)})},
## 7.2 wxml
<view wx:for="{{names}}" wx:key="index">
{{item}}</view>
<button bind:tap="handleChangeList" plain="true" type="primary" size="mini">修改数组</button># 8 双向数据绑定：input checkbox 
<view><!-- 不支持数组和对象 --><input type="text" model:value='{{name}}' style="border:orange solid 1rpx"/><checkbox model:checked="{{isCheck}}"/><text>{{isCheck}}</text>
</view>

1.2 列表渲染

# 1 基本使用
## 1.1 jsdata: {goodsList:[{id:1001,name:'钢笔',price:9},{id:1002,name:'铅笔',price:6},{id:1003,name:'脸盆',price:99}]},
##1.2 wxml<view>
<!-- wx:key 提升性能，不写会警告  可以用 index或 *this：代指item本身  要唯一-->
<view wx:for="{{goodsList}}" wx:key="*this">
<!-- 默认每个对象是item，默认每个下标是index -->
<!-- <text>商品id:{{item.id}}--商品名字:{{item.name}}--商品价格:{{item.price}}</text> -->
</view>
</view>
# 2 修改wx:for-index  wx:for-item 
<view><view wx:for="{{goodsList}}" wx:key="*this" wx:for-item="info">
<!-- 修改默认index和item--wx:for-index  wx:for-item    -->
<text>商品id:{{info.id}}--商品名字:{{info.name}}--商品价格:{{info.price}}</text>
</view>
</view># 3 block
<block>商品id:{{info.id}}--商品名字:{{info.name}}--商品价格:{{info.price}}</block>

1.3 条件渲染

# 1 wx:if   wx:elif   wx:else 
<view><input type="text" model:value='{{score}}' style="border:orange solid 1rpx"/><view wx:if="{{score>=90&&score<=100}}">优秀</view><view wx:if="{{score>=80&&score<90}}">良好</view><view wx:if="{{score>=60&&score<80}}">及格</view><view wx:else="{{score>=90&&score<=100}}">不及格</view>
</view># 2 wx:if  和 hidden
## 2.1 js
showPhoto:true,
showPhotoHidden:truehandleShowPhoto(){this.setData({showPhoto:!this.data.showPhoto})console.log(this.data.showPhoto)},handleShowPhotoHidden(){this.setData({showPhotoHidden:!this.data.showPhotoHidden})},## 2.2 wxml
<view>
<image src="/images/b.jpg" mode="widthFix" wx:if="{{showPhoto}}"/>
<button bind:tap="handleShowPhoto" plain="true" type="primary" size="mini">显示隐藏图片(if)</button>
<view></view>
<image src="/images/b.jpg" mode="widthFix" hidden="{{showPhotoHidden}}"/>
<button bind:tap="handleShowPhotoHidden" plain="true" type="primary" size="mini">显示隐藏图片(hidden)</button>
</view>

二发送网络请求

2.1 wx.request()

# 1 发送网络请求的域名，必须在微信公众平台配置-本地环境去除，只适用于开发版和体验版
# 2 发送请求handleLoadData(){wx.showLoading({title: '加载中，稍后',mask:true  // 显示透明蒙层})wx.request({url: 'http://192.168.71.100:5000',method:'GET',data:{},header:{},success:(res)=>{wx.hideLoading()console.log(res.data)this.setData({userinfo:res.data,})console.log(this.data.name)},fail:(err)=>{},complete:(res)=>{}})},

在这里插入图片描述

2.2 loading提示框

# 显示wx.showLoading({title: '加载中，稍后',mask:true  // 显示透明蒙层})#关闭wx.hideLoading()

三对话框

3.1 模态对话框

##### wxml
<button type="default" size="mini" bind:tap="showModel">弹出模态框</button>
### js ###
showModel(){wx.showModal({title: '这是标题',content: '这是内容部分~~',complete: (res) => {if (res.cancel) {console.log('用户取消了')}if (res.confirm) {console.log('用户确认了')}}})
}

3.2 消息对话框

#### wxml
<button type="default" size="mini" bind:tap="showToast">弹出消息框</button>
### js
showToast(){wx.showToast({title: '恭喜您，秒杀成功',icon:"success",duration:2000})
}

四存储

#### wxml####
<button type="default" plain bind:tap="handleSave">存储数据</button>
<button type="primary" plain bind:tap="handleGet">获取数据</button>
<button type="default" plain bind:tap="handleDelete">删除数据</button>
<button type="primary" plain bind:tap="handleClear">清空数据</button>
###js### 同步####
handleSave() {wx.setStorageSync('name', "justin")wx.setStorageSync('userinfo', {name:'lqz',age:19})
},
handleGet() {const name=wx.getStorageSync('name')const userinfo=wx.getStorageSync('userinfo')console.log(name)console.log(userinfo)
},
handleDelete() {wx.removeStorageSync('name')
},
handleClear() {wx.clearStorageSync()
}###js### 异步####
handleSave() {wx.setStorage({key:'name',data:"justin"})wx.setStorage({key:'userinfo',data:{name:'lqz',age:19}})
},async handleGet() {const name= await wx.getStorage({key:'name'})const userinfo= await wx.getStorage({key:'userinfo'})console.log(name)console.log(userinfo)
},
handleDelete() {wx.removeStorage({key:'name'})
},
handleClear() {wx.clearStorage()
}

五上拉下拉加载

5.1 下拉加载

### wxml####
<view wx:for="{{goods}}" wx:key="index">{{item}}</view>### wxss###
view{height: 400rpx;display: flex;justify-content: center;align-items: center;
}
/* 奇数 */
view:nth-child(odd){background-color: pink;
}
/* 偶数 */
view:nth-child(even){background-color: green;
}##### js######
// 监听上拉下载更多
onReachBottom(){console.log('上拉了')// 发送请求，加载数据wx.request({url: 'http://192.168.71.100:5000',method:'GET',success:(res)=>{console.log(res)this.setData({goods:this.data.goods.concat(res.data)})}})}####json####
{"usingComponents": {},"onReachBottomDistance": 50 # 到达底部距离
}### 后端flask###
from flask import Flask,jsonify
import random
app=Flask(__name__)
@app.route('/',methods=['GET'])
def index():l=[]for i in range(3):l.append(random.randint(0,9))return jsonify(l)if __name__ == '__main__':app.run(host='0.0.0.0')

5.2 下拉刷新

### json####
{"usingComponents": {},"onReachBottomDistance": 50,"enablePullDownRefresh": true, # 开启下拉刷新"backgroundColor": "#efefef", #下拉刷新背景色"backgroundTextStyle":"dark" # 下拉刷新点颜色
}
#### wxml###
<view wx:for="{{goods}}" wx:key="index">{{item}}</view>
###js###
// 下拉刷新
onPullDownRefresh(){console.log('下拉了')this.setData({goods:[1,2,3]})// 在下拉刷新后，loading效果可能没回弹if(this.data.goods.length==3){wx.stopPullDownRefresh()}
}

5.3 使用 scroll-view实现

##### wxml####
<scroll-view 
class="scroll"
scroll-y  # 运行y轴滑动
lower-threshold="100" # 距离底部还有100px时，触发事件
bindscrolltolower="handleGetData"# 事件处理函数refresher-enabled="true"        # 开启 下拉刷新
refresher-default-style="black" # 下拉默认样式
refresher-background="#f0f0f0"  # 下拉背景色
bindrefresherrefresh="handleReload" # 下拉触发事件
refresher-triggered="{{isRefresh}}" # 设置下拉回弹，false允许回弹，enable-back-to-top="true"  # 快速回到顶部，ios点顶部，安卓点tab
><view wx:for="{{goods}}" wx:key="index">{{item}}</view>
</scroll-view>### json###
{"usingComponents": {}
}###wxss###
.scroll{/* 100vh就是指元素的高度等于当前浏览器的视窗高度,即浏览器内部的可视区域的高度大小 */height: 100vh; background-color: grey;
}view{height: 400rpx;display: flex;justify-content: center;align-items: center;
}
/* 奇数 */
view:nth-child(odd){background-color: pink;
}
/* 偶数 */
view:nth-child(even){background-color: green;
}#### js####data: {goods:[1,2,3,4],isRefresh:false},handleGetData(){console.log('上拉了')// 发送请求，加载数据wx.request({url: 'http://192.168.71.100:5000',method:'GET',success:(res)=>{console.log(res)this.setData({goods:this.data.goods.concat(res.data)})}})},handleReload(){console.log('下拉刷新了')wx.showToast({title: '下拉刷新',})this.setData({goods:[1,2,3,4]})this.setData({isRefresh:false})}

六更新和生命周期

6.1 小程序更新

# 1 访问小程序，微信会将小程序代码包，下载到微信本地，打开使用
# 2 当小程序更新版本后，微信会检查小程序版本有没有更新，并下载最新小程序
# 3 更新方式：启动时同步更新，启动时异步更新### 同步更新：-启动时同步更新：微信运行时，会定期检查最近使用的小程序是否有更新。如果有更新，下次小程序启动时会同步进行更新，更新到最新版本后再打开小程序。如果 用户长时间未使用小程序时，会强制同步检查版本更新-如果更新失败，还是会使用本地版本-新版本发布24小时后，基本会覆盖全部用户### 异步更新####启动时异步更新：在启动前没有发现更新，小程序每次 冷启动 时，都会异步检查是否有更新版本。如果发现有新版本，将会异步下载新版本的代码包，将新版本的小程序在下一次冷启动进行使用，当前访问使用的依然是本地的旧版本代码## 强制更新###在启动时异步更新的情况下，如果开发者希望立刻进行版本更新，可以使用 wx.getUpdateManager API 进行处理。在有新版本时提示用户重启小程序更新新版本# 4 在app.js中加入
App({// 生命周期函数，启动小程序就会执行onLaunch(){const update=wx.getUpdateManager()update.onUpdateReady(function(){wx.showModal({title: '发现新版本',content: '重启应用，更新版本新版本?',success:(res)=>{if(res.confirm){update.applyUpdate()}}})})}
})

在这里插入图片描述

6.2 应用生命周期

// app.js
App({/*** 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）*/onLaunch: function () {console.log('小程序启动了')},/*** 当小程序启动，或从后台进入前台显示，会触发 onShow*/onShow: function (options) {console.log('后台切前台了')},/*** 当小程序从前台进入后台，会触发 onHide*/onHide: function () {console.log('进后台了')},})

6.3 页面生命周期

Page({/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log('1 页面加载了')},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {console.log('3 初次渲染完成')},/*** 生命周期函数--监听页面显示*/onShow() {console.log('2 页面显示')},/*** 生命周期函数--监听页面隐藏*/onHide() {console.log('4 页面隐藏')},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log('5 页面卸载')},})

七其他

7.1 分享到朋友圈

// 允许发送到朋友圈，右上角 ... 分享到朋友圈
onShareTimeline(){return {title:"这是一个神奇的页面",query:'name=justin&age=19',imageUrl:'/images/b.jpg'}
},

7.2 转发

# 1 方式一：通过右上方 ...
# 2 方式二：通过按钮， 需要给button设置 open-type="share"
<button open-type="share">转发</button>
# 3 js中编写onShareAppMessage() {return {title:"是朋友就点一下",path:"/pages/my/my", //当前转发的页面imageUrl:'/images/b.jpg'}},