前端開發微信小程序的個人經驗總結–持續更新【原創】
|
1.開發微信小程序之前，先要知道小程序是什么，優勢是什么。 知乎上看到的一個回復 ： https://www.zhihu.com/question/50880960 2.開始看小程序的開發文檔，網上很多教程，但還是看官方的文檔比較全面。 附官方文檔地址：https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/getting-started.html 安裝步驟之類的，都在官方文檔里。 3.小程序文檔看完一遍了，開始用wxml wxs wxss 搭一個簡單的界面吧。 發現其實微信小程序與html +css +js有很多的相似之處，除了標簽不太一樣，貌似都差不多。 4.簡單的搭了幾個界面，發現代碼并沒有達到微信小程序的宗旨 ： 邏輯與渲染分離 。 比如一個簡單的模塊： <view>充值10元</view> <view>充值10元</view> <view>充值10元</view> <view>充值10元</view> 如果純HTML寫 可能你這行代碼要復制好幾遍 。 如果你用小程序寫 你只需要 ： <block wx:for=”item”> <view >{{ item }}<view> </block> 就可以循環出 同樣的幾行代碼 。 小程序實戰經驗總結：
原因是 小程序的image標簽會自帶寬高 320 * 240 需要設置一下 mode = “widthFix” 就可以 變成原圖片的寬高了
要使用  <這一類的 符號時 需要在text標簽內設置 decode =“{{ture}}”
解決方案 ： 把需要循環的模塊做成模板 ，模板里的data設置成變量。 在調用模板時 調用時的data 里再把變量換成需要調用的數組 或者 字符串等。
解決方法 : 直接使用 image 標簽 ，src 設置成網絡圖片，如果需要做成背景， 在image標簽里 加一個子標簽 ，里面設置絕對定位就可以了 。 <image> <view> 這行設置相對于image 絕對定位 ，就可以實現背景圖效果 </view> </image>
小程序里，變量一般是放在每個文件夾的js里的 ，有時候所有頁面都用到 某個數據時 ，一個個申明 太麻煩 ，所以定義一個全局變量 。 首先要在最外面的 app.js 里 的 globalData 里把需要的數據 放進去 。 如 ： globalData: { userInfo: null, url: “http://m.yayuanzi.com/”, } 再在你需要調用的頁面的文件夾里的js文件中 。 在第一行加上const app = getApp()； 然后定義一個變量，把數據放在這個變量里 如 ： data: { //獲得官網地址 address: app.globalData.url, } 最后 這個address 就可以在頁面里用了 。
小程序列表渲染是使用 wx：for = “ {{ 循環的參數 }} ” 如果不加wx：key = “ 參數 ” 的話 ，調試工具中會出現 黃色的警告信息 。 但不會影響頁面 。 網上找的原因 ： wx:key 的值以兩種形式提供 1、wx:key=”property” 其中property是代表在 for 循環的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字符串或數字，且不能動態改變。類似于字典的key值 2、wx:key=”*this”， 保留關鍵字 *this 代表在 for 循環中的 item 本身，這種表示需要 item 本身是一個唯一的字符串或者數字，如： 當數據改變觸發渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組 件保持自身的狀態，并且提高列表渲染時的效率。 不添加wx:key情況： <block wx:for-items=”{{userInfoList}}” >，會出現warning： Now you can provide attr “wx:key” for a “wx:for” to improve performance. 如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略。
小程序的單位rpx 是根據屏幕來自適應的，開發的時候，把開發工具里的 手機模型選成 iphone 6 。 這樣的話，1px = 2rpx ，方便開發。 8.小程序 image跟view標簽上下會有空隙 |
