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