小程序項目開發
在時隔半年以后，又開始了小程序之旅。
在它剛開始出現的時候，只是簡單的做了 技術預研的工作。
現在 又回到 原點，發現變化已經很大了
之前的開發過程的體驗不是很友好，在寫完 代碼之后依然需要手動刷新，
文件夾中 存放的文件 繁雜、容易讓新手混亂。
現在，為了滿足開發環境的需要 wepy 這個框架就出現了。
現在，我們對於 wepy 這個框架進行一系列的深入了解，
並同原生的 小程序開發做一個對比。
看看 新框架開發體驗如何？
變化一、 項目的 文件 以及目錄結構的變化。
1. 在原生的小程序的開發過程中，它的目錄結構是這樣的
project
├── pages
| ├── index
| | ├── index.json index 頁面配置
| | ├── index.js index 頁面邏輯
| | ├── index.wxml index 頁面結構
| | └── index.wxss index 頁面樣式表
| └── log
| ├── log.json log 頁面配置
| ├── log.wxml log 頁面邏輯
| ├── log.js log 頁面結構
| └── log.wxss log 頁面樣式表
├── app.js 小程序邏輯
├── app.json 小程序公共設置
└── app.wxss 小程序公共樣式表
在 wepy 這個框架中的 目錄結構，是這樣的
project
└── src
├── pages
| ├── index.wpy index 頁面配置、結構、樣式、邏輯
| └── log.wpy log 頁面配置、結構、樣式、邏輯
└──app.wpy 小程序配置項（全局樣式配置、聲明鈎子等）
是不是 很類似於 vue 的 .vue 文件？ 意不意外？
變化二、 默認使用 babel編譯， 那么就是支持 ES6/7 的新特性。
app.wpy 文件
import wepy form 'wepy'
export default class extends wepy.app {
config = {
pages: [
'pages/index'
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
}
async testAsync () {
const data = await this.sleep(3)
console.log(data)
}
}
三、支持組件化開發。
組件的代碼同 頁面的代碼
components.wpy
<template>
<view>
<panel>test</panel>
</view>
</template>
<script>
import wepy from 'wepy'
export default class Components extends wepy.component {
components = {
child: Child
}
}
</script>
這里需要強調一點，這個同 vuejs 的開發模式太像了。
建議，如果沒有 vuejs 開發經驗的同學，先去使用下 vuejs 來開發
再回來看這個框架你會非常爽的。
四、 關於 wepy.config.js 配置說明
看到 這個 文件的 命名方式，內心一驚，這不就是 webpack.config.js 嘛
然后帶着這個疑問 回到 查看 wepy.config.js 文件內容
module.exports = {
'output': 'dist',
'source': 'src'
...
}
這簡直就是 webpack 的翻版嘛，搞定這個配置。 我們繼續往下看
五、為什么能實現這么一個功能？
我們先來看一個圖
我覺得 這個框架的作者是講 webpack 的構建工具 理解的很透徹，拆分， 合並。
組裝，壓縮等等。 最后成為 小程序官方規定的樣子。
六、API 以及相關 入口問題
一、程序入口文件 app.wpy
<style lang="less">
/** less **/
</style>
<script>
import wepy from 'wepy';
export default class extends wepy.app {
config = {
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}
};
onLaunch() {
console.log(this);
}
}
</script>
入口文件中的 config 對象，對應着 原生小程序中的 app.json 文件的功能一模一樣。
然后 app.wpy 繼承自 wepy.app
二、頁面 文件 index.wpy
<style lang="less">
/** less **/
</style>
<template lang="wxml">
<view>
</view>
<counter1></counter1>
</template>
<script>
import wepy form 'wepy';
import Counter from '../components/counter';
export default class Index extends wepy.page {
config = {};
components = {counter1: Counter};
data = {};
methods = {};
events = {};
onLoad() {};
// Other properties
}
</script>
這個是 頁面的 具體文件， 其中 index.wpy 繼承自 wepy.page 這個對象
那這個頁面中的 屬性 （鈎子） api 具體有哪些？
| 屬性 | 說明 |
|---|---|
| config | 頁面config，相當於原來的index.json，同app.wpy中的config |
| components | 頁面引入的組件列表 |
| data | 頁面需要渲染的數據 |
| methods | wmxl的事件捕捉，如bindtap，bindchange |
| events | 組件之間通過broadcast，emit傳遞的事件 |
| 其它 | 如onLoad，onReady等小程序事件以及其它自定義方法與屬性 |
三、組件文件 components.wpy
<style lang="less">
/** less **/
</style>
<template lang="wxml">
<view> </view>
</template>
<script>
import wepy form 'wepy';
export default class Com extends wepy.component {
components = {};
data = {};
methods = {};
events = {};
// Other properties
}
</script>
組件的 頁面入口是 繼承自 wepy.component， 其 屬性和頁面屬性是 一樣的，除了不要 config 對象， 和 頁面特有的 一些小程序 事件等。
七、接下來就是 踩坑階段啦~ ， 先踩為敬！！！
八、下面是小程序開發的一個群，歡迎加入。
