微信小程式載入、更新和生命週期、分享、轉發、獲取頭像、獲取暱稱、手機號、客服功能、vant-app

认真的六六發表於2024-06-09

【上拉下拉載入】

 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   onLoad(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   onLoad(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 />