筆記向文章。
歡迎和各位一起討論。
如果文章中有錯(cuò)誤請(qǐng)指出。
1.一些需要去取data中的變量的操作。
我們可以運(yùn)用ES6對(duì)象解構(gòu)賦值來(lái)做簡(jiǎn)化。
這樣的方法我們不光可以在小程序中使用同樣也可以用到vue里面。
// 例子(小程序) let a = this.data.a;
let b = this.data.b;
// ES6對(duì)象解構(gòu)賦值 let {
a,b}
= this ;
// vue let {
a,b}
= this.data;
//小程序2.小程序的 組件公共屬性 hidden如果不注意看文檔的朋友可能就會(huì)遺漏這個(gè)公共屬性。
等于css 中的display:none;
可以運(yùn)用于頻繁切換的節(jié)點(diǎn)。
引用官方的話(huà)來(lái)說(shuō)：
”一般來(lái)說(shuō)，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。
因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運(yùn)行時(shí)條件不大可能改變則 wx:if 較好。
“3.關(guān)于text博主剛開(kāi)始寫(xiě)小程序的時(shí)候在wxml中使用格式化文檔時(shí)踩過(guò)的坑 SevenDream SevenDream SevenDream SevenDream4.關(guān)于image 有事需要渲染圖片時(shí)，連續(xù)的圖片會(huì)發(fā)現(xiàn)圖中間有條白縫。
如果做商城方面在商品詳情中它是切片的話(huà)中間有白條很不雅觀。
在image標(biāo)簽加入display:bolck就好了。
5.關(guān)于跳轉(zhuǎn)如果超出最大頁(yè)面棧處理方法(大于10頁(yè)) ,將跳轉(zhuǎn)封裝。
//utils.js export function navigateTo(url) {
let Type = getCurrentPages().length >= 10 ? '
redirectTo'
: '
navigateTo'
return new Promise((resolve, reject) => {
wx[Type]({
url, success: res => {
resolve() }
, fail: err => {
reject(err) }
, }
) }
) }
// 其他頁(yè)面js import {
navigateTo}
from '
../../utils/utils'
;
navigateTo('
pages/index/index'
)返回上一頁(yè)時(shí)刷新（例如返回個(gè)人中心）wx.switchTab({
url: '
/pages/my/my'
, success:function(){
var page = getCurrentPages().pop();
//當(dāng)前頁(yè)面 page.onLoad();
// 調(diào)用 onload }
}
)在返回上一頁(yè)時(shí)設(shè)置上一頁(yè)的的值 var pages = getCurrentPages();
// 獲取頁(yè)面棧 var prevPage = pages[pages.length - 2];
//上一頁(yè) prevPage.setData(data);
wx.navigateBack({
delta: 1 }
)6.this.setData 如果想改變對(duì)象或數(shù)組中的一個(gè) //data data: {
obj: {
a: 1 }
, array: ['
1'
] }
, //改變對(duì)象 setOBJ:function(){
var name = '
a'
var obj = '
obj.a'
this.setData({
[obj]:2 }
) }
, //改變數(shù)組 setArr: function () {
var num = 0 var arr = `array[${
num}
]` this.setData({
[arr]: 2 }
) }
如果我們有個(gè)表單需要綁定很多bindinput，運(yùn)用上面的方案,在加上data-*。
不需要寫(xiě)很多方法了一個(gè)就夠了 // 寫(xiě)入 data:{
FromOBJ:{
name:'
'
, phone:'
'
, address:'
'
}
}
, onInput: function (e) {
let name = e.currentTarget.dataset.name let value = e.detail.value let valueObj = `FromOBJ.${
name}
`;
this.setData({
[valueObj]:value }
) }
7.封裝 wx.request (網(wǎng)上有很多關(guān)于wx.requset的封裝方案，這里展示樓主的封裝方案)//API.js const HTTP_URL = '
https://xxxx.xxx.xxx/'
function Request(url, data={
}
,method='
get'
,ContentType='
application/json;
charset=utf-8'
) {
return new Promise((resolve, reject) => {
wx.request({
url: HTTP_URL.http + url, method: method, header: {
'
Content-Type'
: ContentType, '
xxxx'
: '
xxxx'
// 其他header頭 }
, data: data, success: function (res) {
resolve(res.data) }
, fail: function (err) {
reject(err) }
}
) }
) }
export function getApi(data) {
var url = '
/getapi'
;
return Request(url, data) }
// 其他頁(yè)面js import {
getApi}
from '
../../utils/api'
;
getApi({
a:1,b:2}
).then(res=>console.log(res)).catch(err=>console.log(err))8.其他注意的問(wèn)題如果運(yùn)用到了iconfont，是一次性將文件全部放入的話(huà)0一定要把iconfont.js刪除。
真機(jī)的時(shí)候會(huì)出現(xiàn)報(bào)錯(cuò)。
白屏無(wú)法加載的情況。
制作動(dòng)畫(huà)效果時(shí)注意 建議用官方的Animation Api 或者css3的animation 慎用transition最后說(shuō)一個(gè)樓主遇到的坑（可能是我的處理方式不對(duì)）。
在map 組件上的層級(jí)不要使用高度變化或者寬度變換的動(dòng)畫(huà)過(guò)度效果，微信Animation Api和css3 transition Animation 屬性都會(huì)卡楨，卡成ppt。
盡量使用他們（微信api，css3）的"transform"來(lái)解決問(wèn)題。
推薦教程：
《微信小程序》以上就是關(guān)于小程序的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
小程序本文轉(zhuǎn)載于：
簡(jiǎn)書(shū)，如有侵犯，請(qǐng)聯(lián)系[email protected]刪除
上一篇：
小程序與普通網(wǎng)頁(yè)開(kāi)發(fā)之間的區(qū)別是什么
下一篇：
分析微信小程序底層原理相關(guān)文章相關(guān)視頻小程序頁(yè)面間傳遞數(shù)據(jù)的方式小程序畫(huà)布canvas隱藏的問(wèn)題解決微信小程序特有頁(yè)面間傳參方式小程序中解決代碼同步執(zhí)行的問(wèn)題關(guān)于小程序百變小程序組件（下）小程序API接口（一）小程序API接口（二） [溫州做小程序]