說明文章為實戰(zhàn)中踩坑經(jīng)歷，以及解決方案。
同時是自己的一個項目回顧，在這里分享給大家，希望能幫助到大家，如果覺得文章對你有用，請點個贊，謝謝！原諒我也是個標(biāo)題黨：
）登錄授權(quán)授權(quán)（基本信息，手機號碼 ）必須使用小程序原生的的button組件，然后指定open-type 后通過回調(diào)才能拿到用戶信息。
代碼入下：
index.wxml 你還未登錄，請先授權(quán)登錄 授權(quán)登錄 你還未綁定手機號，請先去綁定 立即綁定 index.js page({
// ... data: {
hasUserInfo: false, canIUse: wx.canIUse('
button.open-type.getUserInfo'
), userInfo: {
}
, getUserInfo: false, getPhone: false, hasAuth: false }
, onLoad: async function () {
var that = this;
// 查看是否授權(quán) wx.getSetting({
success: function (res) {
if (res.authSetting['
scope.userInfo'
]) {
wx.login({
success: loginRes => {
// 獲取到用戶的 code 之后：
loginRes.code wx.getUserInfo({
success: async function (res) {
// 這里處理業(yè)務(wù)邏輯 }
}
) }
}
) }
else {
// 用戶沒有授權(quán) }
}
}
);
}
, bindGetUserInfo: function (e) {
// 需要什么信息都從e中拿到 以下部分業(yè)務(wù)邏輯 if (e.detail.userInfo) {
//用戶按了允許授權(quán)按鈕 var that = this;
// 獲取到用戶的信息 wx.login({
success: async res => {
const aUserModel = new UserModel();
const params = {
code: res.code, encryptedData: e.detail.encryptedData, iv: e.detail.iv }
const {
data }
= await aUserModel.login({
...params }
) if(data.roles){
// do ... }
if (data.mobile) {
// do ... }
}
}
);
//授權(quán)成功后,通過改變 isHide 的值，讓實現(xiàn)頁面顯示出來，把授權(quán)頁面隱藏起來 that.setData({
isHide: false }
);
}
else {
//用戶按了拒絕按鈕 wx.showModal({
title: '
警告'
, content: '
拒絕授權(quán)，您將無法使用小程序'
, showCancel: false }
);
}
}
, getPhoneNumber: async function (e) {
if (e.detail.encryptedData) {
//用戶按了允許授權(quán)按鈕 const aUserModel = new UserModel();
const params = {
userId: userInfo.id, encryptedData: e.detail.encryptedData, iv: e.detail.iv }
// do ... }
else {
//用戶按了拒絕按鈕 wx.showModal({
title: '
警告'
, content: '
拒絕授權(quán)，您將無法使用小程序'
, showCancel: false }
) }
}
, // ... }
)路由路由跳轉(zhuǎn)的各個方法可以去官網(wǎng)學(xué)習(xí)，這里提遇到的坑，navigateTo路由跳轉(zhuǎn)最多只能10層，所以使用的時候需要考慮是不是確定需要歷史記錄。
為什么要這么說呢。
場景：
一個列表頁面（如下圖），用戶的檔案是可以修改的，如果用navigateTo跳轉(zhuǎn)（/page/archivesEdit?id=1923XXXX）,修改保存用navigateTo（/page/archivesList），這樣來回編輯跳轉(zhuǎn)10次就不讓點擊跳轉(zhuǎn)了。
解決：
思考那我用2個redirectTo 行不行？redirectTo是關(guān)閉當(dāng)前歷史記錄跳轉(zhuǎn)到下一頁面。
造成了我跳轉(zhuǎn)到修改頁面點擊微信自帶的返回是直接跳過列表頁面跳轉(zhuǎn)到首頁。
這個時候測試小姐姐就又要提bug單了。
。
。
完美姿勢：
就是用navigateTo和navigateBack。
我再編輯保存的時候返回用navigateBack返回。
這樣小程序的路由棧就一會在2-3層之間。
當(dāng)然有時候在列表頁面會遇到要重新調(diào)用接口，這時候路由跳轉(zhuǎn)提供了幾個重要的鉤子函數(shù)onShow，onHide，我們可以在onShow的時候可以調(diào)用一下列表的接口。
這2個鉤子函數(shù)足夠我們簡單的跳轉(zhuǎn)，更復(fù)雜的場景下可以通過存Storage這種存取參數(shù)來返回到上一個頁面進行操作，感覺不是優(yōu)雅，但是沒有好的辦法解決了。
Storage場景：
storage有2種方式獲取，當(dāng)你直接wx.getStorageSync('
xxx'
)獲取一個id，去請求接口的可能是獲取不到就已經(jīng)發(fā)送請求了，導(dǎo)致出現(xiàn)bug。
因為wx.getStorageSync('
xxx'
)是異步的 我們可以利用 async/await去方便的使用onLoad: async function (options) {
const editListParams = await wx.getStorageSync('
editListParams'
) this.findReportDetails(editListParams) }
webViewwebview不是在某個頁面使用的，當(dāng)時我以為是類似iframe這種東西嵌入到頁面。
正確的使用態(tài)度是新建一個page頁面，然后跳轉(zhuǎn)到這個page去使用。
例如跳轉(zhuǎn)到小程序關(guān)聯(lián)的公眾號文章：
other.wxml 跳轉(zhuǎn)到webView webView.wxml request微信自帶的網(wǎng)絡(luò)下的request，雖然能拿來就用，如果不封裝就會造成代碼冗余。
大家可自行參考如下封裝ajax.js import {
baseURL }
from '
../config/interfaceURL'
// baseUrl class AJAX {
AJAX ({
url, methods = '
GET'
, data = {
}
}
) {
return new Promise((resolve, reject) => {
this.request(url, resolve, reject, methods, data) }
) }
request (url, resolve, reject, methods, data) {
wx.request({
url: baseURL + url, method: methods, data: data, header: {
'
content-type'
: '
application/json'
}
, success: res => {
const code = res.statusCode.toString() if (code.startsWith('
2'
)) {
resolve(res) }
else {
reject() const errorMessage = res.data.message AJAX.showError(errorMessage) }
}
, fail: err => {
reject() AJAX.showError("網(wǎng)絡(luò)異常，請稍后重試！") }
}
) }
static showError (errorMessage) {
wx.showToast({
title: errorMessage, icon: '
error'
, duration: 2000 }
) }
static serializeLink (obj) {
// 序列化get請求 let temp = '
?'
for (let index in obj) {
if(obj.hasOwnProperty(index)){
temp += (index + '
='
+ obj[index] + '
&'
) }
}
return temp.substr(0, temp.length - 1) }
}
export default AJAX // model層調(diào)用 UserModel.js import AJAX from '
../utils/AJAX'
export class UserModel extends AJAX {
// 小程序授權(quán)登陸 login (params) {
return this.AJAX({
url: `/service/api/users/applet/login`, data: params, methods: '
POST'
}
) }
}
// control調(diào)用 index.js async onLoad (options){
const aUserModel = new UserModel() const params = {
code: loginRes.code, encryptedData: res.encryptedData, iv: res.iv }
const {
data }
= await aUserModel.login({
...params }
) // 其他 }
npm生態(tài)以及第三方ui框架直接通過初始化的微信小程序項目里面沒有package.json文件。
所以在使用npm install xxx 是沒有卵用。
所以我們要自己在文件夾根目錄下執(zhí)行npm init 。
這時候才能通過微信開發(fā)者工具構(gòu)建npm，構(gòu)建成功會生成一個目錄。
推薦用有贊的vant小程序版,社區(qū)較活躍，使用起來不會有很多坑。
雙向綁定對于習(xí)慣使用vue的開發(fā)者來說，少了這個v-model語法糖。
在處理表單的雙向綁定會顯得比較蛋疼。
所以還是有必要說下小程序里面的雙向綁定是怎么樣的。
file:index.js Page({
data: {
list: [] }
, onLoad: function (options) {
// do ... }
, onInput (e) {
let value = e.detail.value let temp = e.target.dataset.name.split('
,'
) let tempKey = temp[1] let tempIndex = temp[0] let tempSubIndex = temp[2] let targetKey = `list[${
tempIndex}
].children[${
tempSubIndex}
].${
tempKey}
` this.setData({
[targetKey]: value }
) }
}
) file:index.wxml 下載圖片和下載圖片授權(quán)這里場景是下載一個固定的靜態(tài)資源圖片，網(wǎng)絡(luò)圖片需先配置download域名才能生效,方法如下：
savePhoto () {
const _this = this;
wx.getImageInfo({
src: '
/static/images/home/Qr.png'
, success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.path, success (result) {
_this.setData({
show: false }
);
wx.showToast({
title: '
保存成功'
, icon: '
success'
, duration: 2000 }
) }
, fail (err) {
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
wx.openSetting({
success (settingdata) {
if (settingdata.authSetting['
scope.writePhotosAlbum'
]) {
_this.savePhoto() }
else {
wx.showToast({
title: '
獲取權(quán)限失敗,無法保存圖片'
, icon: '
success'
, duration: 2000 }
) }
}
}
) }
}
}
) }
}
) }
保存圖片也是需要授權(quán)的，看代碼就完事了。
其他textarea 在ios上表現(xiàn)會有padding值。
我曹 這個就坑了。
我采用要不全是textarea或者全是input 這種去實現(xiàn)表單的填寫。
其他樣式問題也蠻多的，有點ie的味道。
?。?多用flex float去解決一些差異吧~結(jié)語文章每個點都是開發(fā)小程序的時候遇到的問題，本人能力有限，歡迎大家在評論區(qū)提問題交流學(xué)習(xí)，也可以關(guān)注好享家公眾號獲取更多優(yōu)質(zhì)文章。
推薦教程：
《微信小程序》以上就是小程序入門就看這篇的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
微信小程序本文轉(zhuǎn)載于：
掘金社區(qū)，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
小程序之picker 數(shù)據(jù)是 Object Array
下一篇：
小程序圖片如何鋪滿整個屏幕？相關(guān)文章相關(guān)視頻微信小程序知識點總結(jié)自學(xué)微信小程序從零到一：
項目構(gòu)建后http請求封裝微信小程序-canvas生成圖片并保存到本地怎樣將微信小程序發(fā)送到桌面？小程序入門就看這篇微信小程序事件 以及事件對象初識微信小程序(1)初識微信小程序(3) [溫州做小程序]