1.微信小程序的目錄結(jié)構(gòu)

1.外聯(lián)公共樣式的方法

根據(jù)微信的官方文檔，是支持@import的方式一如外聯(lián)的公共樣式的

使用@import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用;表示語(yǔ)句結(jié)束。

文檔地址：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html

但是在實(shí)際的開(kāi)發(fā)過(guò)程中如果通過(guò)@import '../../common.wxss' 的方式引入外聯(lián)的公共樣式common.wxss 卻是不生效的。如果是引用文件和被引用文件在相同的目錄下是生效的。即@import 'common.wxss'的方式

那么怎么管理我們的公共樣式呢？根據(jù)官方文檔。在根目錄的app.wxss中定義的樣式在所有頁(yè)面中都生效。

所以我們的wechat-sdk的公共樣式都是在根目錄的app.wxss中定義的。

2.關(guān)于toast提示

微信小程序的 API 默認(rèn)是支持toast的。 但是wx.showToast(OBJECT)方法的彈層卻是默認(rèn)帶有一個(gè)icon。只可以配置success和loading兩種方式。在我們的項(xiàng)目中不實(shí)用。所以在我們的項(xiàng)目中使用自定義的方式。

使用方法：

在需要使用toast的wxml中添加下面一段代碼(因?yàn)槭?code style=" margin: 0px; padding: 2px 4px; font-family: "Source Code Pro", Consolas, Menlo, Monaco, "Courier New", monospace; font-size: 0.93em; color: rgb(199, 37, 78); border-radius: 3px; background-color: rgb(249, 242, 244);">fixed定位可以放在任意位置，一般放在頁(yè)面最底部):

<view style="display:{{toast?'block':''}}" class="bd-toast">{{toasttxt}}</view>

在對(duì)應(yīng)的.js文件中通過(guò)import的方式引入toast方法

import { toastFn } from '../../utils/toastFn';

在需要彈層的地方直接調(diào)用就可以了

/**
 *@ _this  指向當(dāng)前的page對(duì)象
 *@text toas中顯示的文案
 */
toastFn(_this,[text]);

3.使用ES6開(kāi)發(fā)提升開(kāi)發(fā)效率

小程序是默認(rèn)支持ES6語(yǔ)法的，而且在上傳代碼的時(shí)候會(huì)自動(dòng)把ES6編譯為ES5。
在第二小節(jié)中使用import 的方式引入toastFn就是使用ES6的import

那么使用它有什么好處呢？好處之一就是不用引入第三方庫(kù)就可以實(shí)現(xiàn)代碼模塊化。

比如我在目錄requestapi主要定義的是關(guān)于接口請(qǐng)求的代碼塊。在 utils 中定義的是功能代碼塊。在需要他們的地方直接通過(guò)import的方式引入就可以直接使用。import可以把代碼做很好的隔離。

4.config.js 配置文件的使用

為了便于線(xiàn)下聯(lián)調(diào)和測(cè)試。把依賴(lài)環(huán)境的項(xiàng)通過(guò)配置文件的方式管理起來(lái)。在需要的地方直接import來(lái)引用。如果需要上線(xiàn)的話(huà)只需要在這一個(gè)文件中打開(kāi)相應(yīng)的注釋和關(guān)閉相應(yīng)的注釋就可以了。

//qatestaaac測(cè)試環(huán)境域名
export let hostName='https://wappass.qatestaaac.baidu.com/';

//線(xiàn)上環(huán)境域名
// export let hostName='https://wappass.baidu.com/';

//產(chǎn)品線(xiàn)配置驗(yàn)證成功后跳轉(zhuǎn)的url
export let jumpProductUrl = 'https://www.baidu.com/test';

比如說(shuō)接口的請(qǐng)求都是通過(guò)以下的方式來(lái)寫(xiě)，達(dá)到統(tǒng)一管理測(cè)試環(huán)境和線(xiàn)上環(huán)境的目的：

import {hostName}  from '../config';

wx.request({
    //接口請(qǐng)求
        url: hostName+'wp/api/security/checkvcode',
        data: {
            verifycode: vcode,
            codestring: _this.data.imgcode
        },
        method: 'GET',
        header: {
            'content-type': 'application/x-www-form-urlencoded'
        },
        success: function (res) {

        }
    })

5.怎么獲取表單的數(shù)據(jù)

因?yàn)樾〕绦虻拈_(kāi)發(fā)思想是借鑒 Vue.js 這類(lèi)MVVM框架的數(shù)據(jù)綁定的思想。我們是沒(méi)辦法直接操作所謂的“DOM”的。那我們?cè)趺传@取頁(yè)面的數(shù)據(jù)或者是更新頁(yè)面上的數(shù)據(jù)呢？下面介紹下數(shù)據(jù)綁定的思想

比如頁(yè)面上有下面這樣的一個(gè)input輸入框。

<input type="number" bindinput="phoneInput" maxlength="13" class="bd-phonenum" placeholder="請(qǐng)輸入手機(jī)號(hào)（無(wú)需注冊(cè)）" value="{{inputValue}}" />

Page({
    data:{
        inputValue:'input的默認(rèn)值'   //wxml中會(huì)把使用{{inputValue}}的地方的值和這里綁定起來(lái)
    },
    phoneInput:function(e){
        let value = e.detail.value;//獲取輸入框的值
    },
    updatePageData:function(){
        //這里是去更新頁(yè)面中input 中的值

        this.setData({
            inputValue:'更新的值'    //會(huì)更新頁(yè)面中綁定了{(lán){inputValue}}的節(jié)點(diǎn)
        })
    }
})

從上面的代碼可以了解到為什么基于數(shù)據(jù)綁定的類(lèi)MVVM框架火起來(lái)的原因。前端一直再談就是操作DOM影響頁(yè)面性能。要盡量少的操作DOM。而上面的代碼在沒(méi)有操作的DOM的情況下就完成了獲取頁(yè)面上的數(shù)據(jù)和更新頁(yè)面的數(shù)據(jù)。而且代碼更加的簡(jiǎn)潔。