小程序項目開發(一)

小程序項目開發

在時隔半年之後，又開始了小程序之旅。
在它剛開始出現的時候，只是簡單的作了 技術預研的工做。
如今 又回到 原點，發現變化已經很大了

以前的開發過程的體驗不是很友好，在寫完 代碼以後依然須要手動刷新，
文件夾中 存放的文件 繁雜、容易讓新手混亂。

如今，爲了知足開發環境的須要 wepy 這個框架就出現了。

如今，咱們對於 wepy 這個框架進行一系列的深刻了解，

並同原生的 小程序開發作一個對比。

看看 新框架開發體驗如何？

變化1、 項目的 文件 以及目錄結構的變化。

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 文件？ 意不意外？

變化2、 默認使用 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)
    }
}

3、支持組件化開發。

組件的代碼同 頁面的代碼

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 來開發

再回來看這個框架你會很是爽的。

4、 關於 wepy.config.js 配置說明

看到 這個 文件的 命名方式，心裏一驚，這不就是 webpack.config.js 嘛

而後帶着這個疑問 回到 查看 wepy.config.js 文件內容

module.exports = {
        'output': 'dist',
        'source': 'src'
         ...
    }

這簡直就是 webpack 的翻版嘛，搞定這個配置。 咱們繼續往下看

5、爲何能實現這麼一個功能？

咱們先來看一個圖

我以爲 這個框架的做者是講 webpack 的構建工具 理解的很透徹，拆分， 合併。

組裝，壓縮等等。 最後成爲 小程序官方規定的樣子。

6、API 以及相關 入口問題

1、程序入口文件 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




2、頁面 文件 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等小程序事件以及其它自定義方法與屬性

3、組件文件  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 對象， 和 頁面特有的 一些小程序 事件等。

7、接下來就是 踩坑階段啦~ ， 先踩爲敬！！！

8、下面是小程序開發的一個羣，歡迎加入。