文章出處
文章列表
小程序項目開發
在時隔半年以后，又開始了小程序之旅。
在它剛開始出現的時候，只是簡單的做了 技術預研的工作。
現在 又回到 原點，發現變化已經很大了
之前的開發過程的體驗不是很友好，在寫完 代碼之后依然需要手動刷新，
文件夾中 存放的文件 繁雜、容易讓新手混亂。
現在，為了滿足開發環境的需要 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 對象， 和 頁面特有的 一些小程序 事件等。七、接下來就是 踩坑階段啦~ ， 先踩為敬！！！
八、下面是小程序開發的一個群，歡迎加入。
文章列表
全站熱搜
留言列表
