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

vue 同时被 3 个专栏收录
3 篇文章 0 订阅
2 篇文章 0 订阅
5 篇文章 0 订阅

概述

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 }}

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值