像vue一样开发微信小程序之wepy框架

一，wepy的安装

1，全局安装wepy   =>   npm i wepy-cli -g

2，新建项目project(项目名称) => wepy new project

3，启动项目 => wepy build --watch

二，生成的项目结构

├── 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配置

 

---

这时启动的项目还需要安装  “babel-preset-es2015“和 “babel-preset-stage-1”，

文件wepy.config.js主要配置如下：

babel: {

      sourceMap: true,

      presets: [

        'es2015',

        'stage-1'

      ],

      plugins: [

          'transform-decorators-legacy',

          'transform-export-extensions',

          'syntax-export-extensions'

      ]

三，解决小程序接口回调黑洞

用es7中的async和await来解决层层回调，让异步函数当成同步函数来处理，来，上代码

通过返回一个promise，例子为选择文件接口的回调：

getFilePath(){

        return new Promise((resolve, reject) => {

            wx.chooseImage({ 

                count: 9,

                sizeType: ['original', 'compressed'],

                sourceType: ['album', 'camera'],

                success: function (res) { 

                    resolve(res)

                },

                fail: function(res){

                    reject()

                }

            })

        })

    },

通过async和await来获取返回数据

async addFile(){

              let resData = await req.getFilePath();

}

await必须在async下执行。对于es7的await和async不理解的看下边这个链接

四，wepy语法的使用

首先.wpy文件结构类似于vue,但又不同于vue

 

.wpy文件结构  

1，事件绑定：@tap="function"; function写在methods方法集合中，

2，对于data中的变量可以通过this.a=1;来赋值用this.$apply();方法来告知这个变量发生变化。

3，监听watch,变量发生变化就会触发这个变量函数

watch(){

    变量（newValue,oldValue）{

    }

}   

4，组件的拆分：

子组件：

主要是接受参数作为数据传递

props={

        data:Object

}

父组件：

<child :data.sync = "data"></child>

import Child from '../ components /child'

components = {

            child:Child

}

importwepyfrom'wepy';//引入List、Panel和Counter组件importListfrom'../components/list';importPanelfrom'../components/panel';importCounterfrom'../components/counter';exportdefaultclassIndexextendswepy.page{//页面配置config={"navigationBarTitleText":"test"};//声明页面中将要使用到的组件components={panel:Panel,counter1:Counter,counter2:Counter,list:List};//可用于页面模板中绑定的数据data={myNum:50,syncNum:100,items:[1,2,3,4]}}

---

5，父子组件的通信

父 --->子，用同组件之间的方法就可以，父组件里调用子组件的方法fun

this.$invoke('child','fun');                //切记带引号

子 ---->父，首先先看子组件的方法

child:触发父组件的fun,data为传递的参数，也可不写；

this.$emit('fun',data)；

parent:父组件里的方法写在events中：

events = {

            fun: da => {

                    //dosomething

        }

}

当在fun中运用回调时，这样写：

events = {

            fun: async  da => {

                    //dosomething

                    let resData = await aa();

        }

}

进行传参时请慎用data,可能会报一些 意想不到的错误。

6，循环标签<repeat>

<repeat for="{{list}}"  index = "index"   item = "item">

                <view>{{item.aa}}</view>

</repeat>           

  7,对于get请求

wepy.request('xxxxx').then((d)  =>  console.log(d) )

五， 小程序中遇到的一些问题

1,关于路由的使用

有的时候路由必须 嵌套上一层才能被使用，比如：/pages/detail/detail

2，路由传参在onLoad()函数周期中进行获取

onLoad(option){

                let  a = option.b;

}

3，对于用户拒绝授权的优雅处理。

4，对于全局变量的存储，存在app.wpy中的globalData对象中，就可以全局获取到，在页面page中使用

this.$parent.globalData.aa    //获取aa

5，对于授权和校验用户登录在app.wpy中的onLaunch（）函数周期中进行处理

wepy框架开发的小程序项目暂时先整理这么多，遇到新的问题再进行更新，不足的地方还需指正。

作者：喜欢喝橙汁的
链接：https://www.jianshu.com/p/6943413dc7dd
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。