小程式開發經驗的總結

一、WXML

---

1.1：wx:if與wx:else

前端透過後端的介面取得資訊列表，如果有數據則展示數據內容，否則則顯示找不到資訊。 如果if-else使用布林值的狀態作這個開關的話，頁面會先出現false的狀態，再更新為true，也就是閃現找不到資訊的內容，這種互動不是很理想。

<view wx:if="{{true}}">
	<text>这是信息列表</text>
</view>
<view wx:else>
	<text>找不到信息</text>
</view>

最好的做法是使用下面這種，一開始設定info為null,

data:{
    info:null
}

<view wx:if="{{info === 1}}">
	<text>这是信息列表</text>
</view>
<view wx:if="{{info === 0}}">
	<text>找不到信息</text>
</view>

1.2：wx:for

for循環要新增wx:for-item="item" wx:key="item"

#1.3：block標籤

wx:if、wx:for、wx: else這些沒有樣式意義的語法盡量使用block

1.4：template元件模板

公共的頁面模組/元件，可直接在wxml使用，也可以使用import方式。如果涉及css，需要在wxss裡@import引入。

/**
* 方式一：直接使用
* 1. 给template 设置name属性
* 2. 组件传过来的值可以直接使用  hidden="{{!isloading}}"
*/
<template name="loading">
  <view class="weui-loadmore" hidden="{{!isloading}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">正在加载</view>
  </view> 
</template>

/** 
* 方式二：按路役引入 
* 1. is 等同方式一的name
* 2. data="{{isloading}}" 给template的数据
*/
<import src="../template/loading.wxml"/>
<template is="loading" data="{{isloading}}"></template>

1.5：腳本語言wxs

專門運行於wxml頁面的腳本語言，與javascript不同，不支援使用ES6語法，也不能引用js。

<wxs module="wxs" src="../../utils/wxs.wxs"></wxs>

module.exports = {
	//输出百分比
	formatProgress: function (c,m) {
		return c/m*100
	}
}

二、WXSS

---

#2.1：背景Icon

小程式的background 裡只能使用完整的https圖片路徑，專案中使用icon的方式：

• 向量圖svg：具備完美的可擴展性，容易調整（顏色、大小等）;

• data-uri：圖片體積小於20Kb使用base64方式。 [前端圖片最優化的引入方式分析][segmentfault.com/a/119000001…]

• 較大檔案：直接在wxml使用image標籤

• 引入外部icon：如阿里巴巴向量圖庫，可使用網路路徑和下載到本地的方式來使用。

2.2：重設樣式

#2.3：font-family標準規格

font-family: 
/*西文：*/
-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,
/*中文：*/
PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif;

#2.4：合理使用rpx單位

• rpx 是相當於螢幕寬度百分比的相對單位，下列情況不建議使用：

• font-size和border-width；animation動畫中涉及translate位移：部分機器在rpx轉成px出現小數時，如262.89px，微信會向下取值為262px，產生1px的差距。

• canvas繪圖，如二維碼、分享圖片等。

三、JavaScript

---

#3.1：第二個封裝wx.request方法

3.2：頁面的生命週期

• onLoad: 頁面加載，一個頁面只會呼叫一次。能獲得到頁面參數options。

• onShow: 頁面顯示，每次開啟頁面都會呼叫一次，從後台切換前台也會呼叫一次：手機從熄畫面切回顯示畫面、從最小化回到最大化。

• onReady: 頁面初次渲染完成，一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和視圖層進行互動。

• onHide: 頁面切換到後台、navigateTo 、 tab 切換時呼叫。

• onUnload: 頁面卸載。當頁面被關閉或記憶體不足主動銷毀頁面。

3.3： new Date相容性

# 安卓能辨識new Date("2018-05-30 00:00:00 ")格式，但在IOS只能辨識2018/05/30 00:00:00格式。需要將短橫替換為斜線。 var iosDate= date.replace(/-/g, '/')。

3.4：冒泡事件

• #bindtap ：事件綁定不會阻止冒泡事件向上冒泡

• catchtap：事件綁定可以阻止冒泡事件向上冒泡

四、小程式功能

---

4.1：canvas產生圖片

4.2：外掛程式的使用

4.3：頁面堆疊限制

#小程式的頁面堆疊最新版本限制為10個，超過10個之後無法進入下一個頁面。

故要慎用頁面數量，導航API要靈活結合wx.navigateTo、wx.redirectTo、wx.navigateBack

4.4：提示彈窗Dialog

• #程式碼前面使用wx.hideLoading會導致後面的wx.showToast出不來。因為wx.showToast具備隱藏wx.showLoading()提示框的功能。

五、其它

---

#5.1：主流框架

• ##mpvue：使用vue語法規格編譯成小程式和h5語法

• Taro：基於react可同時編譯成小程式、h5、react-native等。

5.2：常用外掛

• wxParse：富文本解析

##################################### #wx-charts：圖表工具############wxapp-qrcode：二維碼產生器############推薦教學：《###微信小程序###》###

以上是小程式開發經驗的總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！