【上拉下拉加载】
1 后端和路飞项目的课程表相对应
2
3
4 -----wxml-------
5
6
7 <view wx:for="{{goods}}" wx:key="index">{{item.name}}</view>
8
9
10 ------js-----------
11
12
13 Page({
14 data: {
15 page: 1,
16 goods: []
17 },
18
19 refresh(page) {
20 wx.showLoading({
21 title: '加载中',
22 mask: true
23 })
24 wx.request({
25 url: 'http://127.0.0.1:8000/api/v1/course/actual/?page=' + page,
26 method: 'GET',
27 success: (response) => {
28 if (page == 1) {
29 this.setData({
30 goods: response.data.results
31 })
32 } else {
33 const resData = this.data.goods.concat(response.data.results)
34 this.setData({
35 goods: resData
36 })
37
38 }
39
40 },
41 complete: () => {
42 wx.hideLoading()
43 }
44 })
45 },
46 onl oad(options) {
47
48 this.refresh(this.data.page)
49
50 },
51
52 onReachBottom() {
53 this.data.page++
54 console.log('上拉了')
55 // 发送请求，加载数据
56 this.refresh(this.data.page)
57 },
58 onPullDownRefresh() {
59 this.data.page = 1
60 this.refresh(this.data.page)
61 if(this.data.goods.length==3){
62 wx.stopPullDownRefresh()
63 }
64 },
65 })
66
67
68 ------wxss---------
69
70 view{
71 height: 400rpx;
72 display: flex;
73 justify-content: center;
74 align-items: center;
75 }
76 /* 奇数 */
77 view:nth-child(odd){
78 background-color: pink;
79 }
80 /* 偶数 */
81 view:nth-child(even){
82 background-color: green;
83 }
84
85
86 ------json----------
87
88 {
89 "usingComponents": {},
90 "onReachBottomDistance": 50, 距离底部还有50rpx的时候开始加载
91 ---------------------------
92 上拉刷新
93 "enablePullDownRefresh": true, # 开启
94 "backgroundColor": "#efefef",
95 "backgroundTextStyle":"dark"
96 }
。
。
【方式二下拉上拉加载：scroll-view】
1 ----wxml-------
2
3 <scroll-view
4 class="scroll"
5 scroll-y # 运行y轴滑动
6 lower-threshold="100" # 距离底部还有100rpx时，触发事件
7 bindscrolltolower="handleGetData" #事件触发函数
8
9
10 refresher-enabled="true" # 开启 下拉刷新
11 refresher-default-style="black"
12 refresher-background="#f0f0f0"
13 bindrefresherrefresh="handleReload" # 下拉触发事件
14 refresher-triggered="{{isRefresh}}" # 设置下拉回弹，false允许回弹
15
16 enable-back-to-top="true" # 快速回到顶部，安卓点tab,ios点顶部
17 >
18 <view wx:for="{{goods}}" wx:key="index">{{item.name}}</view>
19 </scroll-view>
20
21 ----js------
22
23 Page({
24 data: {
25 page: 0,
26 goods: [],
27 isRefresh: false
28 },
29 handleGetData() {
30 this.data.page++
31 console.log('上拉了')
32 // 发送请求，加载数据
33 wx.showLoading({
34 title: '加载中',
35 mask: true
36 })
37 wx.request({
38 url: 'http://127.0.0.1:8000/api/v1/course/actual/?page=' + this.data.page,
39 method: 'GET',
40 success: (response) => {
41 const resData = this.data.goods.concat(response.data.results)
42 this.setData({
43 goods: resData
44 })
45 },
46 complete: () => {
47 wx.hideLoading()
48 }
49 })
50 },
51 handleReload() {
52 console.log('下拉刷新了')
53 wx.showToast({
54 title: '下拉刷新',
55 })
56 wx.request({
57 url: 'http://127.0.0.1:8000/api/v1/course/actual/?page=' + 1,
58 method: 'GET',
59 success: (response) => {
60 this.setData({
61 goods: response.data.results
62 })
63 },
64 complete: () => {
65 wx.hideLoading()
66 }
67 })
68 this.setData({
69 isRefresh: false
70 })
71 }
72 })
73
74 -----wxss------
75
76 .scroll{
77 /* 100vh就是指元素的高度等于当前浏览器的视窗高度,即浏览器内部的可视区域的高度大小 */
78 height: 100vh;
79 background-color: grey;
80 }
81
82 view{
83 height: 400rpx;
84 display: flex;
85 justify-content: center;
86 align-items: center;
87 }
88 /* 奇数 */
89 view:nth-child(odd){
90 background-color: pink;
91 }
92 /* 偶数 */
93 view:nth-child(even){
94 background-color: green;
95 }
。
。
【更新和生命周期】
（更新）
1 # 1 访问小程序，微信会将小程序代码包，下载到微信本地，打开使用 2 3 # 2 当小程序更新版本后，微信会检查小程序版本有没有更新，并下载最新小程序 4 5 # 3 更新方式：启动时同步更新，启动时异步更新 6 ### 同步更新： 7 -启动时同步更新：微信运行时，会定期检查最近使用的小程序是否有更新。如果有更新，下次小程序启动时会同步进行更新，更新到最新版本后再打开小程序。如果 用户长时间未使用小程序时，会强制同步检查版本更新 8 -如果更新失败，还是会使用本地版本 9 -新版本发布24小时后，基本会覆盖全部用户 10 ### 异步更新#### 11 启动时异步更新：在启动前没有发现更新，小程序每次 冷启动 时，都会异步检查是否有更新版本。如果发现有新版本，将会异步下载新版本的代码包，将新版本的小程序在下一次冷启动进行使用，当前访问使用的依然是本地的旧版本代码 12 ## 强制更新### 13 在启动时异步更新的情况下，如果开发者希望立刻进行版本更新，可以使用 wx.getUpdateManager API 进行处理。在有新版本时提示用户重启小程序更新新版本
1 版本更新，要在总的app.js中加入这段代码
2
3 App({
4 // 生命周期函数，启动小程序就会执行
5 onLaunch(){
6 const update=wx.getUpdateManager()
7 update.onUpdateReady(function(){
8 wx.showModal({
9 title: '发现新版本',
10 content: '重启应用，更新版本新版本?',
11 success:(res)=>{
12 if(res.confirm){
13 update.applyUpdate()
14 }
15 }
16 })
17 })
18 }
19 })
（生命周期）
(应用生命周期)
1 App({
2
3 /**
4 * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
5 */
6 onLaunch: function () {
7 console.log('小程序启动了')
8
9 },
10
11 /**
12 * 当小程序启动，或从后台进入前台显示，会触发 onShow
13 */
14 onShow: function (options) {
15 console.log('后台切前台了')
16 },
17
18 /**
19 * 当小程序从前台进入后台，会触发 onHide
20 */
21 onHide: function () {
22 console.log('进后台了')
23 },
24
25 })
（页面生命周期）
1 Page({
2
3 /**
4 * 生命周期函数--监听页面加载
5 */
6 onl oad(options) {
7 console.log('1 页面加载了')
8
9 },
10
11 /**
12 * 生命周期函数--监听页面初次渲染完成
13 */
14 onReady() {
15 console.log('3 初次渲染完成')
16 },
17
18 /**
19 * 生命周期函数--监听页面显示
20 */
21 onShow() {
22 console.log('2 页面显示')
23 },
24
25 /**
26 * 生命周期函数--监听页面隐藏
27 */
28 onHide() {
29 console.log('4 页面隐藏')
30 },
31
32 /**
33 * 生命周期函数--监听页面卸载
34 */
35 onUnload() {
36 console.log('5 页面卸载')
37 },
38
39
40 })
。
。
【其他】
-----------------------------所有具体使用看微信小程序官方文档-------------------------------------------
（分享到朋友圈）
1 在js中写，无需绑定事件
2
3 index.wxml
4
5 <navigator url="/pages/login/login">点我跳转</navigator>
6
7 ------login.js-----------
8
9 // 允许发送到朋友圈，右上角 ... 分享到朋友圈
10 onShareTimeline(){
11 return {
12 title:"这是一个神奇的页面",
13 query:'name=justin&age=19',
14 imageUrl:'/images/b.jpg'
15 }
16 },
(转发)
1 # 1 方式一：通过右上方 ...
2 # 2 方式二：通过按钮， 需要给button设置 open-type="share"
3
4 --login.wxml-----
5 <button open-type="share">转发</button>
6
7 ----login.js------
8
9 onShareAppMessage() {
10 return {
11 title:"是朋友就点一下",
12 path:"/pages/my/my", //当前转发的页面
13 imageUrl:'/images/b.jpg'
14 }
15
16 },
(获取头像)
1 ------wxml-----
2
3 <button class="btn" open-type="chooseAvatar" bindchooseavatar="choosePhoto">
4 <image src="{{photo}}" class="photo"/>
5 </button>
6
7
8 -------js--------
9
10 Page({
11 data:{
12 phono:'/images/b.jpg'
13 },
14 choosePhoto(event){
15 console.log(event.detail.avatarUrl)
16 this.setData({
17 phono:event.detail.avatarUrl
18 })
19
20 }
21 })
22
23
24 -----wxss-----
25
26 .btn{
27 /* 透明的 */
28 background-color: transparent;
29 }
30 /* 去掉边框 */
31 .btn::after{
32 border: none;
33 }
34 .photo{
35 height: 250rpx;
36 width: 250rpx;
37 border-radius: 50%;
38 }
39
40
41 先获取默认头像，然后点击头像可以选择更改头像，朝后端自己的文件中发送请求，然后更换或是获取新头像
（获取昵称）
1 -----wxml------
2
3 <input type="nickname" placeholder="输入或获取昵称" model:value="{{username}}"/>
4 <button type="primary" plain bind:tap="showName">提交</button>
5
6
7 ------js---------
8
9 Page({
10 data:{
11 username:"",
12 },
13 showName(){
14 console.log(this.data.username)
15 }
16 })
17
18
19 -----wxss---------
20
21 input {
22 border: 1rpx solid pink;
23 border-radius: 10rpx;
24 padding: 10rpx;
25 margin: 10rpx;
26 }
双向绑定
（手机号）
# 1 手机号接口，必须是非个人开发者，并且完成了认证的小程序 # 2 两种验证方式需要付费使用，每个小程序账号有1000次体验额度 # 3 小程序端 # https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html # 用在快速注册、登陆
（手机号快速验证）
1 # 步骤1：需要将 button 组件 open-type 的值设置为 getPhoneNumber，当用户点击并同意之后，通过 bindgetphonenumber 事件获取回调信息； 2 3 # 步骤2：将 bindgetphonenumber 事件回调中的动态令牌code传到开发者后台，并在开发者后台调用微信后台提供的 phonenumber.getPhoneNumber 接口，消费code来换取用户手机号。每个code有效期为5分钟，且只能消费一次。 4 5 6 # 步骤3：后端拿到code --》调用getuserphonenumber 换取手机号 7 https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/user-info/phone-number/getPhoneNumber.html 8 9 # 步骤4：去咱们自己用户表中查 10 -能查到---之前用过，注册了--》签发token 11 -查不到--》第一次用--执行注册--》签发token
1 -----wxml--------
2
3 <button type="warn" open-type="getPhoneNumber"
4 bindgetphonenumber="getPhoneNumber">快速手机号</button>
5
6 -----js---------
7
8 getPhoneNumber(event){
9 console.log(event.detail.code) // 动态令牌
10 console.log(event.detail.errMsg) // 回调信息（成功失败都会返回）
11 console.log(event.detail.errno) // 错误码（失败时返回）
12 console.log(event)
13 },
（手机号实时验证）
1 ------wxml-----
2
3 <button type="default" plain open-type="getRealtimePhoneNumber"
4 bindgetrealtimephonenumber="getRealPhoneNumber"
5 >快速手机号</button>
6
7
8 ------js----------
9
10 getPhoneNumber(event) {
11 console.log(event)
12 // 通过获取手机号返回的code--传递给后端--后端调用：POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN -->获取手机号--》后端签发token给前端
13
14 云调用
15 wx.request({
16 url: '我们后端地址',
17 method:'POST',
18 data:{
19 code:event.detail.code
20 },
21 success:(res)=>{
22 //在此返回登录信息，用户登录
23 }
24
25 })
26 },
27 getRealPhoneNumber(event) {
28 console.log(event)
29 }
(客服功能)
# 微信为小程序提供客服消息能力，以便小程序用户可以方便快捷地与小程序服务提供方进行沟通 https://developers.weixin.qq.com/miniprogram/introduction/custom.html
-----wxml------
<button type="default" plain open-type="contact">联系客服</button>
需要真机测试，然后点击登录网页端客服，接入，然后进行测试
用户收到了回复
。
。
【vant-app】
官网：https://vant-contrib.gitee.io/vant-weapp/#/home
(使用npm包)
1 # 0 必须使用专门为小程序提供的npm包，通常好多包用不了，比如第三方包用了dom，小程序没有
2 https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html#%E5%8F%91%E5%B8%83-npm-%E5%8C%85
3
4 # 1 项目根目录，打开终端【在内建终端打开】
5 -npm init -y # 会生成package.json文件
6 # 2 安装vant（可以使用cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org）
7 npm i @vant/weapp -S # package.json 能看到下载完成，项目目录下有node_modules
8
9 # 3 将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱
10
11
12 # 4 project.config.json 的settings中加入
13 "packNpmManually": true, # 开启npm
14 "packNpmRelationList": [
15 {
16 "packageJsonPath": "./package.json", # 制定了位置
17 "miniprogramNpmDistDir": "./" # 小程序包的位置
18 }
19 ]
20
21 # 5 构建 工具---》构建npm
22
23 # 6 使用，app.json中
24 "usingComponents": {
25 "van-button": "@vant/weapp/button/index"
26 }
27
28 # 7 复制代码放入wxml中即可，具体使用看官方文档
29 <van-image
30 round
31 width="10rem"
32 height="10rem"
33 src="https://img.yzcdn.cn/vant/cat.jpeg"
34 />
标签：console,log,--,微信,更新,获取,data,page,vant From： https://www.cnblogs.com/liuliu1/p/18239028