|
1.開發微信小程序(xu)之前(qian)，先(xian)要知(zhi)道小程序(xu)是什(shen)么(me)，優勢是什(shen)么(me)。 知(zhi)乎上(shang)看到的(de)一個回復 ： //www.zhihu.com/question/50880960 2.開(kai)始看(kan)小(xiao)程(cheng)序(xu)的開(kai)發文(wen)檔，網上很多教程(cheng)，但(dan)還是看(kan)官(guan)方(fang)的文(wen)檔比較全面。 附(fu)官(guan)方文(wen)檔地址(zhi)：//mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/getting-started.html 安裝步(bu)驟之(zhi)類的，都在(zai)官方(fang)文檔里。 3.小程序文檔看完一遍了，開始用(yong)wxml wxs ; wxss 搭一個(ge)簡單的界面吧。 發現其實微信小程序(xu)與html +css +js有很多的相似之處，除了標簽不太一樣，貌似都差不多。 4.簡單的搭(da)了幾(ji)個界面，發現代碼并沒(mei)有達到微信小程序的宗旨 ： 邏輯與渲染(ran)分離 。 比如一(yi)個簡單的模塊(kuai)： <view>充值10元</view> <view>充值10元</view> <view>充值10元</view> <view>充(chong)值10元</view> 如果純(chun)HTML寫 可能你這行代碼(ma)要復制(zhi)好幾(ji)遍 。 如果你用小程序寫(xie) 你只需要 ： <block wx:for=”item”> <view >{{ item }}<view> </block> 就可以循環(huan)出 同樣的幾行代碼 。 小程序實戰經驗總結：
原因(yin)是 小程序(xu)的image標簽會自帶寬(kuan)高 320 * 240 需(xu)要(yao)設置一(yi)下(xia) mode = “widthFix” 就可以(yi) 變成原圖片的寬(kuan)高了
要(yao)使用  <這一類的 符號時 需要(yao)在text標簽(qian)內設置 ;decode =“{{ture}}”
解決方案 ： 把需要循(xun)環的模(mo)塊做成模(mo)板(ban) ，模(mo)板(ban)里的data設置成變量。 在(zai)調(diao)(diao)用模板(ban)時 調(diao)(diao)用時的data 里再(zai)把變量換成需(xu)要調(diao)(diao)用的數組(zu) 或者 字符串等。
解決方(fang)法 : 直接使用(yong) image 標(biao)簽 ，src 設(she)置成網絡圖片(pian)，如果需(xu)要做成背景(jing)， 在image標(biao)簽里 加一(yi)個子(zi)標(biao)簽 ，里面設(she)置絕對定位就可以(yi)了 。 <image> <view> 這行(xing)設(she)置相對于image 絕對定位 ，就可以實現背景圖(tu)效果 </view> </image>
小程(cheng)序里，變量(liang)一(yi)般是放在每個(ge)文(wen)件夾的js里的 ，有(you)時候所有(you)頁面都用到 某個(ge)數據時 ，一(yi)個(ge)個(ge)申(shen)明 太麻煩 ，所以定義一(yi)個(ge)全局變量(liang) 。 首(shou)先要在(zai)最外面(mian)的(de)(de) app.js 里(li) 的(de)(de) globalData 里(li)把需要的(de)(de)數據 放進去 。 如(ru) ： globalData: { userInfo: null, url: “//m.yayuanzi.com/”, } 再在(zai)你需(xu)要(yao)調用(yong)的(de)頁面的(de)文件(jian)(jian)夾(jia)里(li)的(de)js文件(jian)(jian)中 。 在(zai)第一行加上(shang)const app = getApp()； 然后定義(yi)一(yi)個變(bian)(bian)量，把數據放(fang)在這個變(bian)(bian)量里 如 ： data: { //獲得官(guan)網(wang)地址 address: app.globalData.url, } 最后 這個address 就可以在頁面里用了 。
小程序列(lie)表渲染是使用 wx：for = “ {{ 循環的參數(shu) }} ” 如果不加wx：key = “ 參數(shu) ” 的話 ，調試(shi)工具中會出現(xian) 黃(huang)色的警告信息 。 但不會影響頁面 。 網(wang)上找的原因 ： wx:key 的值以兩種形(xing)式提供 1、wx:key=”property” 其中(zhong)property是代表在 for 循(xun)環的 array 中(zhong) item 的某(mou)個 property，該 property 的值(zhi)需要是列表中(zhong)唯一的字符串或(huo)數字，且(qie)不(bu)能動態改變。類似(si)于字典的key值(zhi) 2、wx:key=”*this”， 保留(liu)關鍵字(zi) *this 代(dai)表在 for 循環(huan)中的(de) item 本(ben)身，這種表示需要 item 本(ben)身是一個唯一的(de)字(zi)符串或者(zhe)數字(zi)，如： 當數(shu)據改變觸發渲染層(ceng)重(zhong)新(xin)渲染的時候(hou)，會(hui)校正帶有 key 的組件，框架會(hui)確保他(ta)們被重(zhong)新(xin)排序(xu)，而(er)不是(shi)重(zhong)新(xin)創(chuang)建(jian)，以(yi)確保使(shi)組 件保持自(zi)身(shen)的狀態，并且提高列(lie)表渲染時的效率。 不(bu)添(tian)加wx:key情況： <block wx:for-items=”{{userInfoList}}” >，會出現warning： Now you can provide attr “wx:key” for a “wx:for” to improve performance. 如(ru)果(guo)明(ming)確知(zhi)道該列表是靜態，或者不(bu)必關注其(qi)順(shun)序，可以(yi)選擇(ze)忽略。
小程序的(de)(de)單位rpx 是(shi)根據屏幕來自(zi)適應的(de)(de)，開發(fa)的(de)(de)時候，把開發(fa)工(gong)具里的(de)(de) 手機模型選(xuan)成 iphone 6 。 這樣的(de)(de)話(hua)，1px = 2rpx ，方便(bian)開發(fa)。 8.小(xiao)程序 image跟view標簽(qian)上下(xia)會有空隙(xi) |
