WePy框架的使用

基本示例

import wepy from 'wepy';//引入wepy框架說明 // 經過繼承自wepy.page的類建立頁面邏輯 export default class Index extends wepy.page { //用於頁面模板綁定的數據 data={ motto: 'hello world', userInfo: {} } //事件處理函數(集中保存在methonds對象中) methods = { bindViewTap(){ console.log('button clicked'); } } onLoad () {//頁面的聲明週期方法 console.log('onLoad'); } } 

WePy的基本配置

• WePy根據npm命令來安裝：

  npm install wepy-cli -g

  ​

• 在指定的目錄建立項目

  wepy new myproject

• 切換到指定項目

  cd myproject

• 開啓實時編譯

  wepy build --watch 

WePy項目的目錄結構

├── dist                   微信開發者工具指定的目錄（該目錄由WePY的build指令自動編譯生成，請不要直接修改該目錄下的文件） ├── node_modules ├── src 代碼編寫的目錄（該目錄爲使用WePY後的開發目錄） | ├── components WePY組件目錄（組件不屬於完整頁面，僅供完整頁面或其餘組件引用） | | ├── com_a.wpy 可複用的WePY組件a | | └── com_b.wpy 可複用的WePY組件b | ├── pages WePY頁面目錄（屬於完整頁面） | | ├── index.wpy index頁面（經build後，會在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss文件） | | └── other.wpy other頁面（經build後，會在dist目錄下的pages目錄生成other.js、other.json、other.wxml和other.wxss文件） | └── app.wpy 小程序配置項（全局數據、樣式、聲明鉤子等；經build後，會在dist目錄下生成app.js、app.json和app.wxss文件） └── package.json 項目的package配置 

事件綁定語法

官網語法	替換後
bindtap="click"	@tap="click"
catchtap="click"	@tap.stop="click「

catchtap和bindtap區別

bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定能夠阻止冒泡事件向上冒泡

repeat語法

<repeat for="{{groupList}}" index="index" item="item" key="key"> <counter></counter> </repeat> 

組件化開發

import wepy from 'wepy'; export default class MyComponent extends wepy.component { methods = { bindtap () { let rst = this.commonFunc(); // doSomething }, bindinput () { let rst = this.commonFunc(); // doSomething }, } //正確：普通自定義方法在methods對象外聲明，與methods平級 customFunction () { return 'sth.'; } } 

示例：
<template> <view> <panel> <h1 slot="title"></h1> </panel> <counter1 :num="myNum"></counter1> <counter2 :num.sync="syncNum"></counter2> <list :item="items"></list> </view> </template> <script> import wepy from 'wepy'; //引入List、Panel和Counter組件 import List from '../components/list'; import Panel from '../components/panel'; import Counter from '../components/counter'; export default class Index extends wepy.page { //頁面配置 config = { "navigationBarTitleText": "test" }; //聲明頁面中將要使用到的組件 components = { panel: Panel, counter1: Counter, counter2: Counter, list: List }; //可用於頁面模板中綁定的數據 data = { myNum: 50, syncNum: 100, items: [1, 2, 3, 4] } } </script> 

promise處理

import wepy from 'wepy';

async onLoad() { await wepy.login(); this.userInfo = await wepy.getUserInfo(); } 

關鍵字：async await 能夠直接對promise類型進行支持

wepy從如下幾點能提供便利：

• 類Vue開發風格
• 支持自定義組件開發
• 支持引入NPM包
• 支持Promise
• 支持ES2015+特性，如Async Functions
• 支持多種編譯器，Less/Sass/Styus、Babel/Typescript、Pug
• 支持多種插件處理，文件壓縮，圖片壓縮，內容替換等
• 支持 Sourcemap，ESLint等
• 小程序細節優化，如請求列隊，事件優化等

CSS

層疊樣式表【Cascading Style Sheets】
基本的頁面樣式是用CSS來作支持的。因此CSS樣式對頁面來說是一個臉面的存在
注：如下CSS部分來自 https://developer.mozilla.org/en-US/docs/Web/CSS

層疊樣式表（CSS）是一種樣式表語言,用於描述用HTML或 XML（包括XML方言，如 SVG或XHTML）編寫的文檔的表示。CSS描述了元素如何在屏幕上，紙上，語音或其餘媒體上呈現。

CSS主要能影響如下幾點：

• 【文本樣式】Styling text
• 【盒子樣式】Styling boxes
• 【CSS佈局】CSS layout

文本樣式

• 字體

  術語	定義	例
  serif	有襯線字體的字體（在某些字體的筆觸結尾處看到的蓬勃發展和其餘細節）	個人大紅象
  sans-serif	沒有襯線的字體。	個人大紅象
  monospace	每一個字符具備相同寬度的字體，一般用於代碼清單中。	個人大紅象
  cursive	旨在模仿手寫的字體，流暢的筆畫。	個人大紅象
  fantasy	打算裝飾的字體。	個人大紅象

• 顏色

  ​

ems :1em等於在咱們設計的當前元素的父元素上設置的字體大小（更具體地說，包含在父元素中的大寫字母M的寬度

font-style:Used to turn italic text on and off.

CSS佈局

justify-content:用於設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。

測試頁面：
http://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=flex-start

align-items:屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。
測試頁面：
http://www.runoob.com/try/playit.php?f=playcss_align-items&preval=stretch

p:last-child：指定屬於其父元素的最後一個子元素

display: flex:Flex 是 Flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。

• 任何一個容器均可以指定爲 Flex 佈局。
• Webkit 內核的瀏覽器，必須加上-webkit前綴。

.box{ display: -webkit-flex; /* Safari */ display: flex; } 

注意，設爲 Flex 佈局之後，子元素的float、clear和vertical-align屬性將失效。
Flex佈局：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

 

 

導入wepy項目

wepy項目是依賴npm的，因此在clone下來後，

一、cmd中  進入到該下載文件目錄下（cd e:\wepypro）

二、輸入npm install --save-dev(報錯就輸入（npm init -y）)

三、運行 wepy build --watch,開啓實時編譯