微信小程序开发第三课

1 wxml语法

1.1 模版语法

1. #  1 在页面 xx.js 的 Page() 方法的 data 对象中进行声明定义
2. #  2 在xx.wxml 中使用 {{}} 包裹，显示数据
3. #  3 可以显示如下，不能编写js语句或js方法
4.         -变量
5.         -算数运算
6.         -三元运算
7.         -逻辑判断
8.    
9. # 4 只是单纯通过赋值，js中变量会变化，但是wxml中的页面不会变化，没有联动效果，需要使用setData()方法修改
10.         - 更新数据
11.     - 页面更新
13. # 5 setData案例 修改数字
14. ## 5.1 wxml
15. <view>
16. <view>姓名是：{{name}}</view>
17. <view>年龄是：{{age}}</view>
18. <button bind:tap="handleAddAge" plain="true" type="primary" size="mini">点击增加年龄</button>
19. </view>
20. ##5.2 js
21.   handleAddAge(){
22.     //this.data.age++
23.     console.log(this.data.age)
24.     this.setData({
25.       age:this.data.age+1
26.     })
27.   },
29.    
30. # 6 setData案例 修改对象
31. ## 6.1 wxml<view>
32. <view>姓名是：{{userinfo.name}}</view>
33. <view>年龄是：{{userinfo.age}}</view>
34. <view>爱好是：{{userinfo.hobby}}</view>
35. <button bind:tap="handleChangeName" plain="true" type="primary" size="mini">点击修改对象-姓名</button>
36. </view>
38. ## 6.2 js
39.     data: {
40.         name: 'justin',
41.         age: 19,
42.         userinfo: {
43.           name: 'lqz',
44.           age: 99
45.         }
46.       },
48.   handleChangeName() {
49.     // 增加数据
50.     this.setData({
51.       'userinfo.hobby': '篮球'
52.     })
53.     // 修改数据
54.     this.setData({
55.       'userinfo.name': '彭于晏'
56.     })
58.     // 修改多个数据--》简便方案--》展开运算符
59.     // const userinfo = {
60.     //   ...this.data.userinfo,
61.     //   name: '新名字',
62.     //   hobby: '乒乓球'
63.     // }
64.     // this.setData({
65.     //   // userinfo:userinfo
66.     //   userinfo //简写形式
67.     // })
68.     // 修改多个数据--》简便方案-->assign
69.     const userinfo = Object.assign(this.data.userinfo, {
70.       name: 'xxzz',
71.       hobby: '烫头'
72.     })
73.     this.setData({
74.       // userinfo:userinfo
75.       userinfo //简写形式
76.     })
78.     //删除数据-->单个
79.     delete this.data.userinfo.name // 页面删除不了，需要用setData更新
80.     this.setData({
81.       userinfo:this.data.userinfo
82.     })
84.     //删除数据-->多个--解构赋值
85.     const {name,age,...res}=this.data.userinfo
86.     this.setData({
87.       userinfo:res
88.     })
90.   },
92.    
93. # 7 setData 修改数组
94. ## 7.1 js
95. data: {
96.     names:['刘亦菲','迪丽热巴','古力娜扎','马尔扎哈']
97.   },
98.    
99.    handleChangeList(){
100.     //1 增加数组
101.     // 1.1 增加再设置值
102.     this.data.names.push('亚瑟王')
103.     this.setData({
104.       names:this.data.names
105.     })
107.     // 1.2 通过数组拼接
108.     // const newList=this.data.names.concat("甄姬")
109.     // this.setData({
110.     //   names:newList
111.     // })
113.     // 1.3 通过解构赋值
114.     const newList=[...this.data.names,"李白"]
115.     this.setData({
116.       names:newList
117.     })
119.     // 2 修改数组
120.     this.setData({
121.       'names[1]':'justin'
122.     })
124.     // 3 删除数组
125.     this.data.names.slice(1)
126.     this.setData({
127.       names:this.data.names.slice(1)
128.     })
131.   },
132. ## 7.2 wxml
133. <view wx:for="{{names}}" wx:key="index">
134. {{item}}
136. </view>
137. <button bind:tap="handleChangeList" plain="true" type="primary" size="mini">修改数组</button>
138.    
139.    
140. # 8 双向数据绑定：input checkbox
141. <view>
142.   <!-- 不支持数组和对象 -->
143.   <input type="text" model:value='{{name}}' style="border:orange solid 1rpx"/>
144.   <checkbox model:checked="{{isCheck}}"/>
145.   <text>{{isCheck}}</text>
146. </view>

复制代码

1.2 列表渲染

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

复制代码

1.3 条件渲染

1. # 1 wx:if   wx:elif   wx:else
2. <view>
3.   <input type="text" model:value='{{score}}' style="border:orange solid 1rpx"/>
6.   <view wx:if="{{score>=90&&score<=100}}">优秀</view>
7.   <view wx:if="{{score>=80&&score<90}}">良好</view>
8.   <view wx:if="{{score>=60&&score<80}}">及格</view>
9.   <view wx:else="{{score>=90&&score<=100}}">不及格</view>
10. </view>
13. # 2 wx:if  和 hidden
14. ## 2.1 js
15. showPhoto:true,
16. showPhotoHidden:true
17.     handleShowPhoto(){
18.         this.setData({
19.             showPhoto:!this.data.showPhoto
20.         })
21.         console.log(this.data.showPhoto)
22.     },
23.     handleShowPhotoHidden(){
24.         this.setData({
25.             showPhotoHidden:!this.data.showPhotoHidden
26.         })
27.     },
28.    
29. ## 2.2 wxml
30. <view>
31. <image src="/images/b.jpg" mode="widthFix" wx:if="{{showPhoto}}"/>
32. <button bind:tap="handleShowPhoto" plain="true" type="primary" size="mini">显示隐藏图片(if)</button>
33. <view></view>
34. <image src="/images/b.jpg" mode="widthFix" hidden="{{showPhotoHidden}}"/>
35. <button bind:tap="handleShowPhotoHidden" plain="true" type="primary" size="mini">显示隐藏图片(hidden)</button>
36. </view>

复制代码

二 发送网络哀求

2.1 wx.request()

1. # 1 发送网络请求的域名，必须在微信公众平台配置
2.         -本地环境去除，只适用于开发版和体验版
3. # 2 发送请求
4.   handleLoadData(){
5.     wx.showLoading({
6.       title: '加载中，稍后',
7.       mask:true  // 显示透明蒙层
8.     })
9.     wx.request({
10.       url: 'http://192.168.71.100:5000',
11.       method:'GET',
12.       data:{},
13.       header:{},
14.       success:(res)=>{
15.         wx.hideLoading()
16.         console.log(res.data)
17.         this.setData({
18.           userinfo:res.data,
19.         })
20.         console.log(this.data.name)
21.       },
22.       fail:(err)=>{},
23.       complete:(res)=>{}
25.     })
26.   },

复制代码

2.2 loading提示框

1. # 显示
2. wx.showLoading({
3.       title: '加载中，稍后',
4.       mask:true  // 显示透明蒙层
5.     })
6.    
7.    
8. #关闭
9. wx.hideLoading()

复制代码

三 对话框

3.1 模态对话框

1. ##### wxml
2. <button type="default" size="mini" bind:tap="showModel">弹出模态框</button>
3. ### js ###
4. showModel(){
5.     wx.showModal({
6.         title: '这是标题',
7.         content: '这是内容部分~~',
8.         complete: (res) => {
9.             if (res.cancel) {
10.                 console.log('用户取消了')
11.             }
13.             if (res.confirm) {
14.                 console.log('用户确认了')
15.             }
16.         }
17.     })
18. }

复制代码

3.2 消息对话框

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

复制代码

四 存储

1. #### wxml####
2. <button type="default" plain bind:tap="handleSave">存储数据</button>
3. <button type="primary" plain bind:tap="handleGet">获取数据</button>
4. <button type="default" plain bind:tap="handleDelete">删除数据</button>
5. <button type="primary" plain bind:tap="handleClear">清空数据</button>
6. ###js### 同步####
7. handleSave() {
8.     wx.setStorageSync('name', "justin")
9.     wx.setStorageSync('userinfo', {name:'lqz',age:19})
10. },
11. handleGet() {
12.     const name=wx.getStorageSync('name')
13.     const userinfo=wx.getStorageSync('userinfo')
14.     console.log(name)
15.     console.log(userinfo)
16. },
17. handleDelete() {
18.     wx.removeStorageSync('name')
19. },
20. handleClear() {
21.     wx.clearStorageSync()
22. }
24. ###js### 异步####
25. handleSave() {
26.     wx.setStorage({
27.         key:'name',
28.         data:"justin"
29.     })
30.     wx.setStorage({
31.         key:'userinfo',
32.         data:{name:'lqz',age:19}
33.     })
34. },
36. async handleGet() {
37.     const name= await wx.getStorage({key:'name'})
38.     const userinfo= await wx.getStorage({key:'userinfo'})
39.     console.log(name)
40.     console.log(userinfo)
41. },
42. handleDelete() {
43.     wx.removeStorage({key:'name'})
44. },
45. handleClear() {
46.     wx.clearStorage()
47. }

复制代码

五 上拉下拉加载

5.1 下拉加载

1. ### wxml####
2. <view wx:for="{{goods}}" wx:key="index">{{item}}</view>
4. ### wxss###
5. view{
6.   height: 400rpx;
7.   display: flex;
8.   justify-content: center;
9.   align-items: center;
10. }
11. /* 奇数 */
12. view:nth-child(odd){
13.   background-color: pink;
14. }
15. /* 偶数 */
16. view:nth-child(even){
17.   background-color: green;
18. }
19.    
20. ##### js######
21. // 监听上拉下载更多
22. onReachBottom(){
23.   console.log('上拉了')
24.   // 发送请求，加载数据
25.   wx.request({
26.     url: 'http://192.168.71.100:5000',
27.     method:'GET',
28.     success:(res)=>{
29.       console.log(res)
30.       this.setData({
31.         goods:this.data.goods.concat(res.data)
32.       })
33.       
34.     }
35.   })
37. }
39. ####json####
40. {
41.   "usingComponents": {},
42.   "onReachBottomDistance": 50 # 到达底部距离
43. }
45. ### 后端flask###
46. from flask import Flask,jsonify
47. import random
48. app=Flask(__name__)
49. @app.route('/',methods=['GET'])
50. def index():
51.     l=[]
52.     for i in range(3):
53.         l.append(random.randint(0,9))
54.     return jsonify(l)
57. if __name__ == '__main__':
58.     app.run(host='0.0.0.0')

复制代码

5.2 下拉刷新

1. ### json####
2. {
3.   "usingComponents": {},
4.   "onReachBottomDistance": 50,
5.   "enablePullDownRefresh": true, # 开启下拉刷新
6.   "backgroundColor": "#efefef", #下拉刷新背景色
7.   "backgroundTextStyle":"dark" # 下拉刷新点颜色
8. }
9. #### wxml###
10. <view wx:for="{{goods}}" wx:key="index">{{item}}</view>
11. ###js###
12. // 下拉刷新
13. onPullDownRefresh(){
14.   console.log('下拉了')
15.   this.setData({
16.     goods:[1,2,3]
17.   })
18.   // 在下拉刷新后，loading效果可能没回弹
19.   if(this.data.goods.length==3){
20.     wx.stopPullDownRefresh()
21.   }
22. }

复制代码

5.3 使用 scroll-view实现

1. ##### wxml####
2. <scroll-view
3. class="scroll"
4. scroll-y  # 运行y轴滑动
5. lower-threshold="100" # 距离底部还有100px时，触发事件
6. bindscrolltolower="handleGetData"# 事件处理函数
9. refresher-enabled="true"        # 开启 下拉刷新
10. refresher-default-style="black" # 下拉默认样式
11. refresher-background="#f0f0f0"  # 下拉背景色
12. bindrefresherrefresh="handleReload" # 下拉触发事件
13. refresher-triggered="{{isRefresh}}" # 设置下拉回弹，false允许回弹，
15. enable-back-to-top="true"  # 快速回到顶部，ios点顶部，安卓点tab
16. >
17.   <view wx:for="{{goods}}" wx:key="index">{{item}}</view>
18. </scroll-view>
21. ### json###
22. {
23.   "usingComponents": {}
24. }
26. ###wxss###
27. .scroll{
28.   /* 100vh就是指元素的高度等于当前浏览器的视窗高度,即浏览器内部的可视区域的高度大小 */
29.   height: 100vh;
30.   background-color: grey;
31. }
33. view{
34.   height: 400rpx;
35.   display: flex;
36.   justify-content: center;
37.   align-items: center;
38. }
39. /* 奇数 */
40. view:nth-child(odd){
41.   background-color: pink;
42. }
43. /* 偶数 */
44. view:nth-child(even){
45.   background-color: green;
46. }
47.    
48.    
49. #### js####
50.   data: {
51.     goods:[1,2,3,4],
52.     isRefresh:false
53.   },
54.   handleGetData(){
55.     console.log('上拉了')
56.     // 发送请求，加载数据
57.     wx.request({
58.       url: 'http://192.168.71.100:5000',
59.       method:'GET',
60.       success:(res)=>{
61.         console.log(res)
62.         this.setData({
63.           goods:this.data.goods.concat(res.data)
64.         })
65.         
66.       }
67.     })
68.   },
69.   handleReload(){
70.     console.log('下拉刷新了')
71.     wx.showToast({
72.       title: '下拉刷新',
73.     })
74.     this.setData({
75.       goods:[1,2,3,4]
76.     })
77.     this.setData({
78.       isRefresh:false
79.     })
80.   }

复制代码

六 更新和生命周期

6.1 小程序更新

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

复制代码

6.2 应用生命周期

1. // app.js
2. App({
4.   /**
5.    * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
6.    */
7.   onLaunch: function () {
8.     console.log('小程序启动了')
9.    
10.   },
12.   /**
13.    * 当小程序启动，或从后台进入前台显示，会触发 onShow
14.    */
15.   onShow: function (options) {
16.     console.log('后台切前台了')
17.   },
19.   /**
20.    * 当小程序从前台进入后台，会触发 onHide
21.    */
22.   onHide: function () {
23.     console.log('进后台了')
24.   },
26. })

复制代码

6.3 页面生命周期

1. Page({
3.   /**
4.    * 生命周期函数--监听页面加载
5.    */
6.   onLoad(options) {
7.     console.log('1 页面加载了')
9.   },
11.   /**
12.    * 生命周期函数--监听页面初次渲染完成
13.    */
14.   onReady() {
15.     console.log('3 初次渲染完成')
16.   },
18.   /**
19.    * 生命周期函数--监听页面显示
20.    */
21.   onShow() {
22.     console.log('2 页面显示')
23.   },
25.   /**
26.    * 生命周期函数--监听页面隐藏
27.    */
28.   onHide() {
29.     console.log('4 页面隐藏')
30.   },
32.   /**
33.    * 生命周期函数--监听页面卸载
34.    */
35.   onUnload() {
36.     console.log('5 页面卸载')
37.   },
40. })

复制代码

七 其他

7.1 分享到朋友圈

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

复制代码

7.2 转发

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。