小程序開發初涉實踐與要點

 

寫此文章的時候，使用微信開發者工具版本爲v1.02，調試基礎庫使用2.3.0

由於相關實現方法與vue有點相似，此文章記錄一些關鍵點與實現、與vue的區別，以避免搞混

 

---

 

語法區別與坑點

• 沒必要有根元素
• 綁定屬性到標籤或組件，要用雙{{}}號，不用像vue前端加：
• 因此屬性內有拼接其它字符串，直接寫在屬性內，不用使用+號 如  ：<view id="item-{{id}}"> </view>
• 列表渲染默認不用寫item與index，能夠直接使用，固然也能夠指定另外的名字
• 改變變量：this.setData({key:value})
• 獲取data裏面的數據： this.data.xxxx
• 事件與方法：頁面直接放在data同級（page({內})），組件放在methods
• 沒有屬性計算，可用wxs模塊代替
• 組件的事件傳遞 bind:cancle="show" 也能夠寫成 bindcancle="show" ，即不用冒號
• 組件的值傳遞：<index-top hasUserInfo="{{hasUserInfo}}"></index-top>
• 組件內沒法使用app.wxss中的class選擇器樣式,但會繼承element選擇器的樣式

 

cover-view不支持animation

關於改變data裏的數據

vue沒法以索引改變數組的某個值，但小程序能夠：

this.setData({
    ["myarray["+index+"]"]: 'vbyzc'
})

 

關於引用ui組件庫

幾個ui組件庫，如vant-weapp，iView weapp，都已編譯好在dist目錄，直接所有複製到小程序目錄下便可使用

能夠同時使用多個ui庫

注：最好不要只複製須要的組件文件夾，vant的組件都有引用其它目錄，如common,mixins

每一個組件爲一個目錄，以四種文件存在：js，JSON，WXML，WXSS四種文件

引用方式：

在頁面對應的json文件，usingComponents中引入，如

"van-tabs": "../../vant/tabs/index"

 頁面中直接以引用的鍵名爲標籤名來插入如 ：<van-tabs></van-tabs>

 

關於WXS模塊（？）

小程序官方的話：WXS（WeiXin Script）是小程序的一套腳本語言，結合 WXML，能夠構建出頁面的結構。

能夠代替屬性計算，使用場景如計算購物車總價、數量，本例直接在wxml寫入wxs代碼片斷（注：不能使用es6）

<wxs module="vmodule">
    function CARTINFO(o){
        var _totalPrice = 0;
        var _count = 0;
        o.forEach(function(item,cidx){
            item.items.forEach(function(foods,fidx){
                //console.log(cidx,'-',fidx)
                if(foods.count){
                    _count += 1
                    _totalPrice += foods.count*foods.price
                }
            })
        })
        return {_totalPrice,_count}
    }
    module.exports.CARTINFO = CARTINFO
</wxs>


<view class="totalprice">￥{{vmodule.CARTINFO(goods)._totalPrice}}    </view>

直接調用模塊vmodule中的方法CARTINFO，返回一個對象

 

 

關於調用組件的方法和事件傳遞

小程序的父子組件事件傳遞，相對vue來講，會簡單一點，下面以一個dialog模態框組件爲例

調用子組件的方法：

小程序能夠直接獲取組件實例，並調用

 

組件加上id,，並用內置選擇器獲取

直接調用便可。

 

組件內的事件發送到父級：

給組件肯定和取消2個按鈕，各綁定一個事件，調用內置方法解發不一樣的事件（可理解爲發送，vue中是this.$emmit('handler')）

 

而後在父頁面中，把發送過來的事件綁定到父頁面中的事件，這點和vue差很少意思：

 

 

關於cover-view的層級問題

cover-view用於替代view用來覆蓋在原生組件上面的元素，好比：

<camera
  class="mycamera"
  device-position="back"
  flash="off"
  binderror="error"
  style=""
>

    <cover-view class='mask_top'>
        <cover-view class="scan_mode_title" scroll-top="0"> 
        {{
            scanMode==1 ? '掃印章' : '掃植物'
        }}    
        </cover-view>
    </cover-view>

</camera>

小程序內部對cover-view進行了層級處理，因此會和css的z-index衝突，設置了z-index，並沒有法生效

可是仍然能夠利用position來進行定位

 

關於image組件

這裏不一樣於html中的image，整個image至關於一個組件

能夠當作內部是一個inline-block的div元素再套入了一個image元素