微信小程序wepy框架学习和使用心得详解

一、微信小程序wepy框架简介:

微信小程序WePY框架是腾讯官方推出来的框架,类似的框架还有美团的mpvue,京东的Taro等; 目前公司开发小程序主要用到的是微信原生方法和官方的wepy框架; wepy框架在开发过程中参考了 Vue 等现有框架的一些语法风格和功能特性，对原生小程序的开发模式进行了再次封装，更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。相对更容易上手,提高开发效率;

二、WePY项目的创建与目录结构

WePY的安装或更新都通过npm进行，全局安装或更新WePY命令行工具

npm install wepy-cli -g

在开发目录中生成Demo开发项目

wepy new myproject

切换至项目目录

cd myproject

安装依赖

npm install

开启实时编译

wepy build --watch

WePY项目的目录结构如下

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

搭建好项目后，IDE需配置代码高亮，文件后缀为.wpy，可共用Vue的高亮规则，但需要手动设置，具体配置大家可参考wepy官方文档

三、wepy使用心得总结：

1.wepy代码风格类似Vue，如computed,data,methods等用法差不多,熟悉vue开发的同学看看文档可以轻松上手，不过还是有很多地方写法容易混淆，我工作中遇到的总结几个,如列表循环,条件渲染,父子组件值传递等,下面举例说明:

1). wepy和vue列表循环对比:

   // wepy 列表循环,外面可套一层repeat标签,注意和vue写法的区别  <repeat for="{{list}}" key="index>    <view>{{item}}</view>  </repeat>    // vue 列表循环,外面可套一层template标签  <template v-for="(item,index) in list" :key="index"> // 不推荐key直接用索引index    <div>{{item}}<div>  </template>