第六單元 wepy
二、本單元知識點概述
三、本單元教學(xué)目標
（Ⅰ）重點知識目標
1.wepy的安裝與運行
2.wepy配置
（Ⅱ）能力目標
1.掌握wepy的安裝與運行
2.掌握wepy配置
四、本單元知識詳講
6.1. wepy
官網(wǎng)：WePY Document
6.1.1 wepy簡介
什么是wepy
WePY是騰訊官方出品的一個小程序快速開發(fā)框架，對原生小程序的開發(fā)模式進行了再次封裝，更貼近于 MVVM 架構(gòu)模式，并支持ES6/7的一些新特性，同時語法風(fēng)格更接近于 Vue.js，使用 WePY 框架能夠提高 小程序的開發(fā)效率
注意：WePY 只是小程序的快速開發(fā)框架之一，市面上還有諸如 mpvue 之類的小程序開發(fā)框架也比較流行
為什么要使用wepy
開發(fā)風(fēng)格接近于 Vue.js，支持很多vue中的語法特性
通過 polyfill 讓小程序完美支持 Promise
以使用ES6等諸多高級語法特性，簡化代碼，提高開發(fā)效率
對小程序本身的性能做出了進一步的優(yōu)化
支持第三方的 npm 資源
持多種插件處理和編譯器
6.1.2 wepy的安裝與運行
安裝wepy
npm i -g @wepy/cli
運行
wepy init standard myproject # 使用 standard 模板初始化項目
cd myproject # 進入到項目目錄
npm install # 安裝項目依賴包
npm run dev # 監(jiān)聽并且編譯項目
”wepy init” 是固定寫法，代表要初始化 wepy 項目；
”standard” 代表模板類型為標準模板，可以 運行 ”wepy list” 命令查看所有可用的項目模板；
”myproject” 為自定義的項目名稱
6.2. wepy文件介紹
6.2.1 介紹.wpy文件的組成部分
一個 .wpy 文件可分為四大部分，各自對應(yīng)于一個標簽：
結(jié)構(gòu)部分，即<template></template>模板部分，對應(yīng)于原生的 .wxml 文件。
腳本部分，即<script></script>標簽中的內(nèi)容，又可分為兩個部分：
配置部分，即<config></config>標簽部分，對應(yīng)于原生的 .json 文件
樣式部分，即<style></style>樣式部分，對應(yīng)于原生的 .wxss 文件。 其中，小程序入口文件 app.wpy 不需要 template，所以編譯時會被忽略。
6.2.2 .wpy文件使用說明
wpy 文件中的 script、template、style 這三個標簽都支持 lang 和 src?屬性，lang 決定了其代碼編譯過程，src 決定是否外聯(lián)代碼，存在 src 屬性且有效時，會忽略內(nèi)聯(lián)代碼
各標簽對應(yīng)的 lang 值如下表所示
標簽lang默認值lang支持值
stylecsscss、less、scss、stylus、postcss
templatehtmlhtml、wxml、xml、pug(原jade)
scriptbabelbabel、TypeScript
6.2.3 小程序入口app.wpy
入口文件 app.wpy 中所聲明的小程序?qū)嵗^承自 wepy.app 類
<style></style>標簽：會被編譯為小程序的 app.wxss 全局樣式
<script></script>標簽：會被編譯為小程序的 app.js文件
<config></config>標簽：會被編譯為小程序的 app.json 全局配置文件
wepy.app中相關(guān)配置說明
wepy.app({
? ?// 內(nèi)置鉤子事件，方便開發(fā)者可以對內(nèi)置流程的控制
? ?hooks: {
? ? ? ?// 在用戶注冊的所有響應(yīng)事件前觸發(fā)(@tap, @change),返回 false 時會取消該事件的響應(yīng)
? ? ? ?'before-event': function(data) {},
? ? ? ?// 在進行數(shù)據(jù)綁定之前觸發(fā)，返回 false 時會取消該時事件綁定
? ? ? ?'before-setData': function(dirty) {}
?? },
? ?// 全局變量，整個小程序內(nèi)有效
? ?golbalData: '',
? ?// 生命周期函數(shù)，小程序初始化完畢執(zhí)行
? ?onLaunch() {},
? ?// 方法定義
? ?methods: {}
})
6.2.4 頁面.wpy文件中的script標簽組成結(jié)構(gòu)
頁面文件 page.wpy 中所聲明的頁面實例繼承自 wepy.page 類，該類的主要屬性介紹如下
屬性說明
data頁面渲染數(shù)據(jù)對象，存放可用于頁面模板綁定的渲染數(shù)據(jù)
methodswxml事件處理函數(shù)對象，存放響應(yīng)wxml中所捕獲到的事件的函數(shù)，如bindtap、bindchange
eventsWePY組件事件處理函數(shù)對象，存放響應(yīng)組件之間通過$broadcast、$emit、$invoke所傳遞的事件的函數(shù)
computed計算屬性
watch監(jiān)聽屬性
其它小程序頁面生命周期函數(shù)，如created、mounted等，以及其它自定義的方法與屬性
6.3. wepy框架開發(fā)規(guī)范與使用
6.3.1 如何設(shè)置默認首頁
如果要把剛創(chuàng)建的 home.wpy 設(shè)置為默認首頁，需要打開 src -> app.wpy 入口文件，將 home.wpy 的頁面 路徑，注冊到 config -> pages 數(shù)組中，并調(diào)整為數(shù)組的第一項即可
示例代碼
<config>
? ? {
?? ? ? pages: ['pages/home', 'pages/index']
? ? } ? ?
</config>
6.3.2 創(chuàng)建頁面的注意事項
每個頁面的 script 標簽中，必須導(dǎo)入 @wepy/core 模塊，并創(chuàng)建繼承自 wepy.page 的頁面類,否則會報錯
每個頁面的路徑，必須記錄到 app.wpy 的 config -> pages 數(shù)組中
6.3.3 頁面綁定事件以及傳參
原生小程序使用 bindtap、bindinput 等綁定事件處理函數(shù)，在 wepy 框架中，優(yōu)化了事件綁定機制，支持類似于 Vue.js 的事件綁定語法
例如：
原 bindtap="clickHandler" 替換為 @tap="clickHandler"
原 bindinput="inputHandler" 替換為 @input="inputHandler"
代碼示例
<template>
? ? <button @tap="handleTap(1)">點擊</button>
</template>
<script>
? ? import wepy from '@wepy/core'
? ?wepy.page({
? ? ? ? methods: {
? ? ? ? ? ?handleTap(id) {
? ? ? ? ? ? ? ?console.log(id)
? ? ? ? ?? }
? ? ?? }
?? })
</script>
6.3.4 頁面以及文本框數(shù)據(jù)綁定
通過v-model指令實現(xiàn)文本框與頁面的雙向綁定
示例代碼
<template>
? ? <input v-model="msg" /> <br />
? ?<div>{{ msg }}</div>
</template>
<script>
? ? import wepy from '@wepy/core'
? ?wepy.page({
? ? ? ? data: {
? ? ? ? ? ?msg: "hello world"
? ? ?? }
?? })
</script>
6.3.5 Wxs腳本的使用
與小程序中wxs腳本的使用方式一致，分為外聯(lián)與內(nèi)嵌
代碼示例：
<template>
?<div>
?? {{ mod.upper(msg) }}
?</div>
</template>
<wxs module="mod">
? var upper = function(str) {
?? return str.substring(0, 1).toUpperCase() + str.substring(1)
? }
? module.exports = {
?? upper: upper
? }
</wxs>
<script>
import wepy from '@wepy/core';
wepy.page({
?data: {
? ?msg: "hello world",
? }
})
</script>
注意：被注冊的 wxs 模塊，只能在當前頁面的 template 中使用，不能在script中使用
6.3.6 配置promisify啟用async和await
下載@wepy/use-promisify
npm i @wepy/use-promisify
基本用法
import wepy from '@wepy/core';
import promisify ?from '@wepy/use-promisify';
wepy.use(promisify)
小程序中異步API調(diào)用方法
安裝@wepy/use-promisify后，小程序中所有的異步API調(diào)用格式為：wepy.wx.方法名
示例代碼：
wepy.wx.getStorage('mykey').then(res => console.log(res));
簡化參數(shù)
weapp-style函數(shù)始終需要一個Object參數(shù)，并且此插件將簡化參數(shù)
示例代碼：
wepy.use(promisify);
// wepy.wx.getStorage({ key: 'mykey' });
wepy.wx.getStorage('mykey');
// wepy.wx.request({ url: myurl });
wepy.wx.request(myurl);
6.3.7 Wepy發(fā)送get和post請求
如果沒有安裝@wepy/use-promisify,請求示例：
wx.request({
? ?url: '', // url地址
? ?method: '', // GET 或 POST
? ?data: {}, // 數(shù)據(jù)請求
? ?// 請求成功的回調(diào)函數(shù)
? ?success() {}
})
如果安裝了@wepy/use-promisify,請求示例：
wepy.wx.request({
? ?url: '',
? ?methods: '',
? ?data: {}
}).then(data => {
? ?console.log(data)
})
如果安裝了@wepy/use-promisify并且是GET請求，可直接簡寫成
wepy.wx.request('url').then(data => { console.log(data) })
五、本單元知識總結(jié)**
1.明白下單的流程
