WEPY微信小程序开发框架入门

概述

wepy框架是小程序上最早的一款类 Vue 语法的开发框架。现已发布了2.x版本，较1.x版本有了很大的更新。
兼容原生代码 能够兼容原生代码，即部分页面为原生，部分页面为 WePY。同时做到无需任何改动即可引用现有原生开发的小程序组件，所以容易上手开发。

开发要点

介绍

小程序组件化开发框架 通过 polyfill 让小程序完美支持 Promise

安装

$ npm install @wepy/cli -g # 全局安装 WePY CLI 工具
$ wepy init standard myproj # 使用 standard 模板初始化项目
$ cd myproj # 进入到项目目录
$ npm install # 安装项目依赖包
$ npm run dev # 监听并且编译项目
wepy init wepyjs/wepy-wechat-demo myfolder

注册APP

<!-- app.wpy -->

<script>
import wepy from '@wepy/core'

wepy.app({
  // 选项
})
</script>

注册页面

<!-- app.wpy -->

<config>
{
  "pages": [
    "pages/example"
  ]
}
</config>

<!-- pages/example.wpy -->

<script>
import wepy from '@wepy/core'

wepy.page({
  // 选项
})
</script>
<config>
{
  "usingComponents": {
    "comA": "components/comA"
  }
}
</config>

注册组件

<!-- components/comA.wpy -->

<script>
import wepy from '@wepy/core'

wepy.component({
  // 选项
})
</script>

wepy单文件

主要由 <script>，<template>，<style>，<config> 四部分组成

声明周期
包含component的完整生命周期 + Page特有生命周期

模板标签
picker image audio video navigator label view

数据
{{msg}}

组件属性
v-bind:id=“id”
v-if=“condition”
v-show=“condition”
v-on:tap=“event”
@tap=“event”
v-for="(item,idx) in array"

{{ ok ? ‘YES’ : ‘NO’ }}
{{ a + b }}
{{ length > 5 }}
{{ “hello” + name }}