微信小程式開發知識點總結
1.微信小程式的目錄結構
1.外聯公共樣式的方法
根據微信的官方文件，是支援@import的方式一如外聯的公共樣式的
使用@import語句可以匯入外聯樣式表，@import後跟需要匯入的外聯樣式表的相對路徑，用;表示語句結束。
文件地址：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html
但是在實際的開發過程中如果通過@import '../../common.wxss' 的方式引入外聯的公共樣式common.wxss 卻是不生效的。如果是引用檔案和被引用檔案在相同的目錄下是生效的。即@import 'common.wxss'的方式
那麼怎麼管理我們的公共樣式呢？根據官方文件。在根目錄的app.wxss中定義的樣式在所有頁面中都生效。
所以我們的wechat-sdk的公共樣式都是在根目錄的app.wxss中定義的。
2.關於toast提示
微信小程式的 API 預設是支援toast的。 但是wx.showToast(OBJECT)方法的彈層卻是預設帶有一個icon。只可以配置success和loading兩種方式。在我們的專案中不實用。所以在我們的專案中使用自定義的方式。
使用方法：
在需要使用toast的wxml中新增下面一段程式碼(因為是fixed定位可以放在任意位置，一般放在頁面最底部):
|
1 |
<view style="display:{{toast?'block':''}}" class="bd-toast">{{toasttxt}}</view> |
在對應的.js檔案中通過import的方式引入toast方法
|
1 |
import { toastFn } from '../../utils/toastFn'; |
在需要彈層的地方直接呼叫就可以了
|
1 2 3 4 5 |
/** *@ _this 指向當前的page物件 *@text toas中顯示的文案 */ toastFn(_this,[text]); |
3.使用ES6開發提升開發效率
小程式是預設支援ES6語法的，而且在上傳程式碼的時候會自動把ES6編譯為ES5。
在第二小節中使用import 的方式引入toastFn就是使用ES6的import
那麼使用它有什麼好處呢？好處之一就是不用引入第三方庫就可以實現程式碼模組化。
比如我在目錄requestapi主要定義的是關於介面請求的程式碼塊。在 utils 中定義的是功能程式碼塊。在需要他們的地方直接通過 import的方式引入就可以直接使用。import可以把程式碼做很好的隔離。
4.config.js 配置檔案的使用
為了便於線下聯調和測試。把依賴環境的項通過配置檔案的方式管理起來。在需要的地方直接import來引用。如果需要上線的話只需要在這一個檔案中開啟相應的註釋和關閉相應的註釋就可以了。
|
1 2 3 4 5 6 7 8 |
//qatestaaac測試環境域名 export let hostName='https://wappass.qatestaaac.baidu.com/'; //線上環境域名 // export let hostName='https://wappass.baidu.com/'; //產品線配置驗證成功後跳轉的url export let jumpProductUrl = 'https://www.baidu.com/test'; |
比如說介面的請求都是通過以下的方式來寫，達到統一管理測試環境和線上環境的目的：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import {hostName} from '../config'; wx.request({ //介面請求 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.怎麼獲取表單的資料
因為小程式的開發思想是借鑑 Vue.js 這類MVVM框架的資料繫結的思想。我們是沒辦法直接操作所謂的“DOM”的。那我們怎麼獲取頁面的資料或者是更新頁面上的資料呢？下面介紹下資料繫結的思想
比如頁面上有下面這樣的一個input輸入框。
|
1 |
<input type="number" bindinput="phoneInput" maxlength="13" class="bd-phonenum" placeholder="請輸入手機號（無需註冊）" value="{{inputValue}}" /> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Page({ data:{ inputValue:'input的預設值' //wxml中會把使用{{inputValue}}的地方的值和這裡繫結起來 }, phoneInput:function(e){ let value = e.detail.value;//獲取輸入框的值 }, updatePageData:function(){ //這裡是去更新頁面中input 中的值 this.setData({ inputValue:'更新的值' //會更新頁面中繫結了{{inputValue}}的節點 }) } }) |
從上面的程式碼可以瞭解到為什麼基於資料繫結的類MVVM框架火起來的原因。前端一直再談就是操作DOM影響頁面效能。要儘量少的操作DOM。而上面的程式碼在沒有操作的DOM的情況下就完成了獲取頁面上的資料和更新頁面的資料。而且程式碼更加的簡潔。