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

0.137字数 1212阅读 29476


一,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框架开发的小程序项目暂时先整理这么多,遇到新的问题再进行更新,不足的地方还需指正。