mpVue小程序全棧開發

一、微信小程序，mpVue和wepy的對比

 二、

 三、es6中關於數組的一些方法

 1    <script>
 2      let arr = [1,2,3,4]
 3      // 遍歷
 4      arr.forEach(v => {
 5        console.log(v)
 6      })
 7 //     循環操做
 8      console.log(arr.map(v => v*2))
 9 //     循環判斷
10      console.log(arr.every(v => v > 2))
11      // 過濾
12      console.log(arr.filter(v => v <= 3))
13 //     數組去重
14      let arr1 = [1,2,3,4,5,2]
15      let arr2 = [4,5,6,7]
16      console.log([...new Set(arr1)])
17 //     並集
18      console.log(arr1.concat(arr2))
19 //     去重並集
20      console.log([...new Set([...arr1,...arr2])])
21    </script>

arr.foreach 遍歷

arr.map 按順序進行操做 返回一個數組

arr.every    every() 方法測試數組的全部元素是否都經過了指定函數的測試。  https://www.cnblogs.com/leejersey/p/5483247.html

四、小程序生命週期

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html

 五、初始化一個mpvue項目

http://mpvue.com/mpvue/quickstart/

 1 # 3. 全局安裝 vue-cli
 2 # 通常是要 sudo 權限的
 3 $ npm install --global vue-cli
 4 
 5 # 4. 建立一個基於 mpvue-quickstart 模板的新項目
 6 # 新手一路回車選擇默認就能夠了
 7 $ vue init mpvue/mpvue-quickstart my-project
 8 
 9 # 5. 安裝依賴，走你
10 $ cd my-project
11 $ npm install
12 $ npm run dev

npm run dev啓動項目後  用微信小程序開發工具打開項目  就能夠自動運行

六、mpvue項目結構

 七、mpVue中的生命週期

主要是用Vue的生命週期，Created建立初始化。Vue沒有的生命週期，就用小程序本身的

 八、koa的一些知識

ctx是什麼？

是封裝了request和response的上下文

next是什麼？

下一個中間件

app是什麼？

啓動應用

 

koa中的中間件

相似洋蔥同樣的圓環，從中間件1,2,3進入，再從3,2,1出來，獲得最後的響應結果，由於是圓環狀的，因此能夠獲得網絡請求以前或以後的內容

結果是：135642

九、回調地獄，Promise，async+await

 1 function ajax(fn) {
 2   setTimeout(() => {
 3     console.log('你好')
 4     fn()
 5   }, 1000)
 6 }
 7 // 回調地獄
 8 ajax(()=>{
 9   console.log('執行結束')
10   ajax(()=>{
11     ajax(()=>{
12       ajax(()=>{
13         console.log('執行結束3')
14       })
15     })
16     console.log('執行結束2')
17   })
18 })
19 
20 // 你好
21 // 執行結束
22 // 你好
23 // 執行結束2
24 // 你好
25 // 你好
26 // 執行結束3
27 
28 
29 function delay(word) {
30    return new Promise((resolve, reject) => {
31      setTimeout(() => {
32        resolve(word)
33      }, 2000)
34    })
35 }
36 
37 // 使用Promise
38 delay('孫悟空')
39   .then((word) => {
40     console.log(word)
41     return delay('豬八戒')
42   })
43   .then((word) => {
44     console.log(word)
45     return delay('沙僧')
46   })
47   .then((word) => {
48     console.log(word)
49   })
50 
51 // saync+await一塊兒使用
52 async function start() {
53   const word1 = await delay('孫悟空')
54   console.log(word1)
55   const word2 = await delay('豬八戒')
56   console.log(word2)
57   const word3 = await delay('沙僧')
58   console.log(word3)
59 }
60 start()
61 
62 // 孫悟空
63 // 豬八戒
64 // 沙僧

第一個就是回調地獄，外層的請求結果是內層的參數， 代碼可讀性差，錯誤不易處理

Promise就是用來處理異步請求的

async+await 是Promise的語法糖

爲何使用async+await   

https://cnodejs.org/topic/58e4914e43ee7e7106c13541

十、

 十一、

騰訊雲常見問題：https://cloud.tencent.com/document/product/619/11442  

本地搭建開發環境：https://cloud.tencent.com/document/product/619/11442#.E6.9C.AC.E5.9C.B0.E5.A6.82.E4.BD.95.E6.90.AD.E5.BB.BA.E5.BC.80.E5.8F.91.E7.8E.AF.E5.A2.83

https://coding.imooc.com/lesson/218.html#mid=14305

祕鑰：https://console.cloud.tencent.com/cam/capi

APPid：https://console.cloud.tencent.com/developer

十二、微信小程序 請求的url若是報下面的錯

解決辦法是，在微信小程序工具中，點擊詳情，選中下面的

 1三、eslint: await is a reserved word的解決辦法

解決辦法：

 1四、微信小程序後臺

https://developers.weixin.qq.com/miniprogram/dev/qcloud/qcloud.html#經過微信公衆平臺受權登陸騰訊雲

微信公衆平臺

https://mp.weixin.qq.com/wxopen/initprofile?action=home&lang=zh_CN&token=1777431014

騰訊雲

https://mp.weixin.qq.com/wxopen/thirdtools?action=index&token=1777431014&lang=zh_CN

騰訊雲後臺管理

https://console.qcloud.com/lav2/dev

這裏面有關於騰訊雲的各類API

騰訊雲服務端SDK API  wafer2-node-sdk  

Wafer 服務端 SDK 是騰訊云爲微信小程序開發者提供的快速開發庫

https://github.com/tencentyun/wafer2-node-sdk/blob/master/README.md

騰訊雲相關文檔

https://developers.weixin.qq.com/miniprogram/dev/qcloud/qcloud.html#其餘具體開發文檔

 

 1五、Mpvue課程問答區總結帖

http://www.imooc.com/article/31092

1六、獲取到用戶信息後，用戶信息是如何存入mysql數據庫 的

https://coding.imooc.com/learn/questiondetail/60293.html

1七、微信小程序要實現下拉刷新，須要在json裏面配置enablePullDownRefresh

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

下拉刷新的時候會觸發onPullDownRefresh事件

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

 

在mpvue中，要配置的話，在main.js裏面

 

export default {
  config: {
    enablePullDownRefresh: true
  }
}

 

 1八、8-7 圖書訪問次數統計  

mpveu中獲取傳遞的options   http://mpvue.com/mpvue/#_18 

     1. 如何獲取小程序在 page onLoad 時候傳遞的 options 

     在全部 頁面 的組件內能夠經過 this.$root.$mp.query 進行獲取。

 1九、9-5 手機型號

獲取手機的信息     https://developers.weixin.qq.com/miniprogram/dev/api/systeminfo.html

 20.  9-10 （分享功能，使用了button）

button組件  https://developers.weixin.qq.com/miniprogram/dev/component/button.html