微信小程序----沒有 DOM 對象，一切基於組件化 ---- mpvue

封裝好用的 類庫 和 組件，複用且靈活度高

抽取相同的部分放在函數內部(組件內部)

抽取不一樣的部分放在形參(組件 props 傳參，或者插槽)

new Promise 運行時

初始化實例對象的狀態爲 pending 初始化

根據後續異步代碼，修改狀態爲 成功狀態 或者 失敗狀態，而後自動調用相應的回調

React - 沒有 DOM 對象，一切基於組件化 - 動態構建用戶界面的 js 庫

模塊化： 實現特定功能的代碼集合

組件化： 實現某功能模塊的全部資源集合

事件機制

事件冒泡： 捕獲階段 - 目標階段 - 冒泡階段

子元素的事件觸發，會觸發父元素的同類型事件

WeChat -

的 bindtap="bFunc" 這樣綁定的事件，有事件冒泡

的 catchtap="cFunc" 這樣綁定的事件，不會冒泡

事件委託： 子元素的事件，委託給父元素去綁定監聽，使得後入的新元素可以觸發事件

數據綁定

雙向數據綁定，將數據劫持，放到實例上，進行代理

之因此是雙向數據綁定，是由於利用了 Object.defineProperty 自定義 setter() 和 getter() 監視了數據的變化

移動端適配 - 一套代碼實現 不一樣設備顯示相同的效果 - 等比效果

1 物理像素

react 的 this.setState() 是異步的，能夠 this.setState({}, function(){//更新狀態完畢後的回調})

WeChat 小程序的 this.setData() 也是異步的，且也有回調

前端和後端 ：                  前端                                            後端 - 數據存儲、數據處理

前臺和後臺 ： 前臺交互頁面，後臺管理系統

npm install nodemon ---- nodemon sever.js

webstorm-settings-editor-FileTypes -

微信小程序

• 輕量高效，既能夠原生微信開發，也能夠 mpvue 開發，極度相似 vue 開發
• 沒有 DOM 對象，一切基於組件化
• 單向數據流 Model ----> View
• 全局頂級對象 wx ---- 擁有各類 api
• 即便 data 中無屬性，也能夠用 this.setData({"xxx": value}) 動態添加屬性
• flex 佈局無兼容性問題
• 事件數據的傳遞 data-xxx="value", 事件回調中數據獲取 event.curremtTarget.dataset ||event.target.target)
• 路由調換數據傳遞 url:"?xxx="+value
• 四個重要文件

*.wxml - 結構

*.wxss - 樣式

*.js - 行爲

*.json - 配置文件

• 小程序開發

width: 100rpx;    // rpx 其實就是 物理像素 - 100 rpx 就至關於 50px

流程：

1) 註冊整個應用： /app.js ---- App({})

2) 全局配置文件： /app.json ---- {"pages":[], "window":{}}

3) 註冊頁面: /pages/index/index.js ---- Pages({})

4) 寫結構: /pages/index/index.wxml ---- 相似 html 文件

5) 寫樣式: /pages/index/index.wxss ---- 全局樣式 <page> 等，寫在 /index.wxss 中

app.json - 全局配置 - 框架

{

"pages": [

"pages/index/index"    // 第一個元素，就是第一個頁面

],

"window":{

"navigationBarBackgroundColor": "#8ed145",    // 導航欄背景顏色

}

}

app.js - 全局邏輯

App({    // 註冊程序

})

app.wxss - 視圖頁面

page {

height: 100%;

}

pages/ - 頁面

index/ - 首頁 - 右鍵新建頁面(生成四個文件)

index.wxml - 首頁結構

<view class="index_container">    // 等同於 div - 統一 class - 注意命名規範

<image class="index_img" src="/images/index/cart.jpg"></image>

<text class="index_word">你知道我在等你嗎</text>

<view class="index_start">

<text bindtap="toStart">I can live with that.</text>

</view>

</view>

index.wxss - 首頁樣式

.index_container{

height: 100%;

display: flex;

flex-direction: column;

align-items: center;

}

index.js - 首頁行爲

Page({    // 註冊頁面

data: {    // 頁面初始數據

msg: "KOU"    // 單向數據流： 數據只能從數據層流向視圖層，而不能反過來

},

toStart(){

wx.navigateTo({    // 保留當前頁面

 

})

},

"navigationBarBackgroundColor": "#8ed145"

onLoad: function(options){   // 用 Source 打斷點能夠發現 onLoad(){} 時, 頁面已經顯示，而且數據也已經渲染了

// options 默認是空對象，若是是從路由跳轉來的，且帶查詢字符串，則 options 就是路由參數

} 

                         // this.data.msg 意味着 不像 vue 那樣的，而是像 react 的 this.setState() 相似

                         // this.setData({msg: "新的狀態數據"})

onShow: function(){}

onReady: function(){}

})

• 請求 openId 參數： wx.login() 獲取到登陸憑證code /服務器的 appId,appKey

微信支付

• 三次請求

1) 請求獲取用戶的 openId

2) 發送訂單信息給微信接口請求支付的詳情

3) 發起支付請求，正式扣款

• 兩個接口

4) 請求預支付結果 的接口： https://api.mch.weixin.qq.com

5) 正是調用 扣款接口 wx.requestPayment();

• 微信分享 - detail.vue  button - open-type=share配置 onShareAppMessage(res){

console.log(res)

if(res.from === "button"){

return {title:"", path, imgUrl}

}

}

index.json

• 模板

定義模板

<template name="list_item">

<view>

<text>{{msg}}: {{time}}</text>

</view>

</template>

引入模板

在 .wxml 引入 <import src="template.wxml"/> 模板結構

在 .wxss 引入@import "template.wxss" 模板樣式

使用模板

<template is="list_item" data="{{...item}}"></template>

調試時，模擬數據

commonJS

在 list-data.js 文件中 module.export = xxx;

在 .js 中引入 let listDatas = require("../../datas/list-data.js");

Page({

data:{ liInfo: []}

onLoad: function(options){

1

}

})

<block></block> 表示標籤內容 爲一個塊

父組件向子組件傳遞數據 

url 的請求字符串，

只能是 JSON 數據的傳遞，

JSON 對象 或者是 JSON 數組

提示： wx.showToast({title: "xxx"})

緩存

1) setStorage() 單個 key 數據上限爲 1 M, 全部 key 的數據上限爲 10M

2) 存放到 App.js 中的 全局 data 中

發送 HTTPS 請求 wx.request() ---- 最大併發限制爲 10 個

小程序爲了 安全起見，必須發送 https 請求

url 須要進行 開發配置 - 服務器配置 

美團 -  小程序框架 mpvue

mp ---- mini program 的縮寫

可使用 vue 來開發小程序

mpvue 及支持 vue 的生命週期函數，同時也支持小程序的生命週期函數，可是小程序的生命週期函數不推薦使用

 

npm install --global vue-cli

npm install stylus stylus-loader

vue init mpvue/mpvue-quickstart my-mobile-app

App.vue 至關於 App.wxml 和 App.wxss

<style>

page

height 100%

</style>

App.json

{

"pages": [

"pages/firstView/main"    // 也必定要寫 main    而非 index

],

"navigtionBarBackgroundColor": "#02a774"

}

main.js

import Vue from "vue"

import App from "./App"

Vue.config.productionTip = false;    // 關閉提示

App.mpType = "app";    // 生命 App 是一個應用，而非一個組件頁面

const app = new Vue(App);    // 生成實例對象

app.$mount();    // 掛載實例

/static/img/

firstView/1.jpg    // 最終會被打包到 /dist/wx/static/

/src/pages/firstView/

firstView.vue    至關於 .wxml    .js    .wxss

// 能夠用 微信小程序 標籤，可是一般用 html 標籤

<template>

<div id="first_view_box">首頁</div>

</template>

main.js 入口文件

import Vue from "vue"

import FirstViewfrom "./firstView"

const firstView= new Vue(FirstViewfrom );    // 生成實例對象

firstView.$mount();    // 掛載實例

main.json    當前頁面的配置文件 ---- 在 /dist/pages/index 中 統一叫 main，而非 index

{

"navigationBarTitleText": "書城"

}

圖書 App

• 新添加的 page 不會生效，即不會熱更新
• 架構描述

@change 就至關於文檔的 bindChange

event.mp 至關於文檔的 event

this.$mp.query.xxx     就至關於    onLoad(options){options.xxx}

小程序中，浮動元素的父元素高度不會塌陷？？？？

後端經過 node 進行路由分發，減輕服務的壓力

1. 新建文件夾 mpvue_server

2. 新建 package.json

3. npm install koa koa-router

4. 編寫 server.js 搜索接口服務器接口 ---- koa 和 express 相比，

let Koa = require("koa");

let KoaRouter = require("koa-router");

let {get} = require("./utils/request");

 

const app = new Koa();        // 生成實例應用

const router = new KoaRouter();        // 生成路由器

/*********************** 封裝成 /mpvue_server_utls/request.js *********************/

let Fly = require("flyio/src/node")

let fly = new Fly();

exports.get = function (url) {

return new Promise((resolve, reject)=>{

fly.get(url)

.then(response=>resolve(response))

.catch(err=>console.log(err))

}

}

/********************************************/

router.get('/', asyync (ctx, next)=>{

ctx.body = "服務器返回的數據"

});

/*    接口

method: GET

url: /searchBooks

data: {req: ??}

返回數據格式: json 

*/

router.get("", async (ctx, next)=>{

let req = ctx.query.req

let url = `https://api.douban.com/v2/book/search?q=${req}`

 

let result = await get(url)

ctx.body = result;    // 返回給前端

})

 

app.use(router.routes())

.uew(router.allowedMethods())        // 容許使用路由方法

app.listen("4100", ()=>{        // 啓動服務器並監聽 端口號 4100

console.log('服務器開啓成功');

console.log('服務器地址： http://localhost:3000');

})

原生 ajax

let xmlHttp = new XMLHttpRequest();    // window 的方法，so 必須在 window 的環境下

xmlHttp.onreadystatechange = function () {

if(xmlHttp.readystate === 4 && xmlHttp.status === 200){

console.log(xmlHttp.responseText)

}

}

xmlHttp.open(url, methods);    // 建立連接並規定請求方式

xmlHttp.send();

注意： 小程序的 全局環境對象 是 wx 而非 window，因此使用 fly 庫，就能夠解決這個問題發送 ajax 請求

前端封裝 請求庫-----------------------------------------

const host = "http://localhost:4100"

export default function (url, data="", method="GET"){

return new Promise((resolve, reject)=>{

wx.request({

url: host+url,

data, method,

success: (response)=>resolve(response.data)

error: (err)=>console.log(err)

})

}

/******************************* 使用 ***********************************/

methods: {

handleSearch () {

this.books = await request("/searchBooks", {req: this.searchContent}, "GET")

}

}

動態設置窗口 title

 

開放接口 - 用戶信息 - 登陸驗證 api wx.getUserInfo - getPaidUnionld - UserInfo

wx.getUserInfo({       // 直接向微信服務器 發送請求，獲取數據 - 敏感數據是不可能這種方式獲取到的

success: (response)=>{

a

},

fail: (err)=>console.log(err)

})

 

 

 

注意：

1. 會話密鑰 session_key 是對用戶數據進行 加密簽名 的密鑰。

爲了應用自身的數據安全，開發者服務器不該該把會話密鑰下發到小程序，也不該該對外提供這個密鑰。

2. 臨時登陸憑證 code 只能使用一次

 

框架 - 開放能力 - 官方登陸流程時序

1. 進入小程序 馬上 wx.login() 臨時獲取登陸憑證 code

mounted () {

wx.login({

success: async (response)=>{

let code = response.code

let result = await request("/getOpenId", {code}, "GET")

}

})

}

2. wx.request() 發送 code 給開發服務器

3. 開發者服務器 根據 appId 、 appSecret 、code 來進行  - 獲取到 用戶的身份標識 appId

 // 調用 code2Session 接口，換取 用戶惟一標識 OpenID 和 會話密鑰 session_key

4. 前端 存 openId 到 storage 中

5. 根據標識 - 前端 發送請求 向後端 進行數據交互

收藏一本書，參數： openId、bookId

查看個人收藏，參數： openId

 npm install mongoose