學習微信小程序及知識占及v-if與v-show差別


注意點:

一、接口調用方式:

getOpenid: function () {
var that = this;
return new Promise(function (resolve, reject) {
wx.login({
success: function (res) {
//code 獲取用戶信息的憑證
//調用接口獲取登錄憑證(code)。通過憑證進而換取用戶登錄態信息,
// 包括用戶的唯一標識(openid)及本次登錄的會話密鑰(session_key)等。
// 用戶數據的加解密通訊需要依賴會話密鑰完成。
if (res.code) {
//請求獲取用戶openid
wx.request({
url: that.globalData.ctxUrl + "/wx/onLogin",
data: { "code": res.code },
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
wx.setStorageSync("useropenid", res.data.body.openid);
wx.setStorageSync("platformId", res.data.body.platformId);
var res = {
status: 200,
data: res.data.body.openid
}
// 在外面調用app.getOpenid時就會將res傳到then方法的第一個參數里面
resolve(res);
}
});
} else {
console.log('獲取用戶登錄態失敗!' + res.errMsg)
reject('error');
}
}
})
});
}
先在app.js文件里寫一個公共方法調wx.login接口獲取code,然后將這個code傳后后端,后端會通過這個code調用微信接口,然后返回userid和platformId,然后存到緩存里,
在調其它接口的時候就需要傳這個userid和platformId等。


app.getOpenid().then(function(res) {
if (res.status == 200) {
var userId1 = wx.getStorageSync("useropenid");
var platformId1 = wx.getStorageSync('platformId');
that.setData({
userId: wx.getStorageSync("useropenid"),
platformId: wx.getStorageSync('platformId')
}),

wx.request({
url: app.globalData.ctxUrl + '/wx/partOfHomeDetails',
data: {
"userId": userId1,
"platformId": platformId1,
"photo": photo,
"userName": userName
},
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (result) {
wx.setStorageSync("userid", result.data.body[0].userId);
that.setData({
list: result.data.body
})
}
})


小程序調接口通過token的方法如下:

每次推送觸發之前都會檢查一下是否過期,如果過期,重新執行一下后端的 getAccessToken 的方法去獲取
code換openId的話
小程序每次打開的時候都執行一下onLogin的方法拿code
然后把這個code傳給后端,后端返回openid等值,后端再把相關的openId+session_key生成一個Token再返回給小程序(也就是你再調一個接口它返給你token)
然后小程序的所有請求把這個Token帶上訪問就可以了
相關的話可以去了解下JWT

 
 
        
以上是微信小程序如何調用后端接口的實例

二、可以用block標簽上加判斷條件,block本身不會顯示在頁面上

 

三、v-if與hidden屬性區別,hidden每一次要渲染,標簽會存在,但是相當於設置了display:none,

 而v-if只有條件滿足才渲染,否則不渲染,如果不渲染標簽是不會顯示在頁面上的

v-if vs v-show

v-if 是“真正”的條件渲染,因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。

v-if 也是惰性的:如果在初始渲染時條件為假,則什么也不做——直到條件第一次變為真時,才會開始渲染條件塊。

相比之下,v-show 就簡單得多——不管初始條件是什么,元素總是會被渲染,並且只是簡單地基於 CSS 進行切換。

一般來說,v-if 有更高的切換開銷,而 v-show 有更高的初始渲染開銷。因此,如果需要非常頻繁地切換,則使用 v-show 較好;如果在運行時條件很少改變,則使用 v-if 較好。

 

四,用wx:for-item可以改變遍歷時取值時不用item.id了,可以用i.id了

 

 

五、template模板

 

 

 5,

 

 

 

 六、知識點網站

https://github.com/CruxF/WXsmallProgram

https://github.com/CruxF/WXsmallProgram

 

https://wendux.github.io/dist/#/doc/flyio/wx

需要了解的網站:

https://www.v2ex.com/t/519999?p=1

一個mpvue項目中基於flyio實現的可更新cookie的攔截器

https://juejin.im/post/5c11d2b0e51d4514b3526a62

了解下flyio(fly.js)

 

七、

1、上線流程:

(微信小程序如果用原生的開發,上線時先將所有代碼保證最新代碼后點小程序的右上角的上線,需要輸入版本號啥的,在管理員的版本管理里就會有你剛提交的那個版本了,然后管理員會點提交審核,審核通過后下面就會出現打包發布的按鈕,管理員就可以發布了)

需要,build之后點上傳,然后在小程序管理后台的版本管理那里提交審核,審核通過了就可以發布上線了

上小程序的編輯器里可以看到上傳那個按

在微信小程序的官網里有版本管理,可以點開看下

某一個帳號可以讓多個人管理,可以在成員管理里添加成員的微信號

 

2:如果想讓其它人使用自己的項目,可以讓另一方在新建項目里點進去,然后會出來這樣的條碼,然后你掃下另一方就可以進來你的項目了

 

八、用token調后端接口

 

也可以用cookie去操作和更新token的:

cookie既可以在響應攔截器里根據后端提示過期再請求然后更新也行,也可以自己在本地校驗是否過期,直接在請求發起前就更新cookie

 

九、比較重要的幾個api調用的微信接口

wx.login():: 調用接口獲取登錄憑證(code)。

通過憑證進而換取用戶登錄態信息,包括用戶的唯一標識(openid)及本次登錄的會話密鑰(session_key)等。

code string 用戶登錄憑證(有效期五分鍾)。開發者需要在開發者服務器后台調用 code2Session,使用 code 換取 openid 和 session_key 等信息

wx.getAccountInfoSync():獲取當前帳號信息,用它可以取到appid

const accountInfo = wx.getAccountInfoSync() console.log(accountInfo.miniProgram.appId) // 小程序 appId console.log(accountInfo.plugin.appId) // 插件 appId console.log(accountInfo.plugin.version) // 插件版本號, 'a.b.c' 這樣的形式

wx.canIUse():判斷小程序的API,回調,參數,組件等是否在當前版本可用。

使用 ${API}.${method}.${param}.${options} 或者 ${component}.${attribute}.${option} 方式來調用
wx.canIUse('button.open-type.getUserInfo')

wx.authorize:提前向用戶發起授權請求。

調用后會立刻彈窗詢問用戶是否同意授權小程序使用某項功能或獲取用戶的某些數據,但不會實際調用對應接口。如果用戶之前已經同意授權,則不會出現彈窗,直接返回成功。

注意:下面的scope下有很多屬性分別代表不同的授權,最后調用的方法要與scope下的屬性相對應,如微信運動授權,就調scope下的微信運動屬性,授權成功后再調運動的方法

// 可以通過 wx.getSetting 先查詢一下用戶是否授權了 "scope.record" 這個 scope wx.getSetting({ success(res) { if (!res.authSetting['scope.record']) { wx.authorize({ scope: 'scope.record', success() { // 用戶已經同意小程序使用錄音功能,后續調用 wx.startRecord 接口不會彈窗詢問 wx.startRecord() } }) } } })

wx.getSetting():獲取用戶的當前設置。返回值中只會出現小程序已經向用戶請求過的權限

(就是查看它的授權信息,哪些功能授權了,哪些功能沒授權,如果已經授權了,就直接調用經授權的方法,如果沒有授權就調用wx.authorize()進行授權,授權后再調用功能方法)

wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
//scope它下面有很多屬性分別代表不同的權限,這里的scope.userInfo是指調用戶信息的權限
// 已經授權,可以直接調用 getUserInfo 獲取頭像昵稱,不會彈框
wx.getUserInfo({
success: res => {
// 可以將 res 發送給后台解碼出 unionId
this.globalData.userInfo = res.userInfo
wx.setStorageSync("userPhoto", res.userInfo.avatarUrl)
wx.setStorageSync('nickName', res.userInfo.nickName);
// 由於 getUserInfo 是網絡請求,可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
wx.setNavigationBarTitle:為每個頁面設置title文件

 wx.getUserInfto:獲取用戶信息

例如:像下面這樣點擊  “獲取用戶信息” 按鈕

在這個按鈕里綁上getuserinfo方法,在getuser里就可以取到用戶信息了

 

 

這時點擊獲取用戶信息按鈕時就會調getuser方法,里面的事件對象下面就會返回用戶相關信息了

 

 

 

 

 



十:標簽組件,常用的標簽
image:里加上mode這個屬性后就是寬度固定,高度自動

scroll-view:這個標簽組件可以用在滾動到底端時加載下一頁的功能,要給page{height:100%}

這里的loading是控制下拉刷新連續觸發的功能

list.push這塊做的目的是下拉刷新后之前的數據還要

 

 

 

 

 

 
        
 
 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM