wepy是一个微信小程序框架

wepy是一个微信小程序框架,支持模块化开发,开发风格类似Vue.js。可搭配redux使用,能同时打包出web和小程序。
官方文档地址

目录结构:

sotre: redux(如果你创建项目时使用了redux的话)

wepy.config.js: webpack配置文件

app.wpy: 入口文件

project.config.json: 小程序项目配置文件

index.template.html: web页面的入口文件

pages: 存放主页面

components: 存放组件

mixins: 混合组件

mixins:
其中mixins是放混合组件的地方,比如很多page中都要用到wx.showToast方法。且都是loading方法。那么我们可以创建一个toast.js

其中wepy继承了wx对象的方法,建议在wepy框架开发中不要用到wx对象的方法,虽然运行时效果是一样,但是打包时会cli报错(wepy中没有wx对象)。
mixins的方法定义好后,就可以在组件中使用mixins了。

首先在mixins中注册toast,然后就可以像调用自身方法一样,直接调用this.showToast()
wepy中组件中使用的是class,vue中使用的的是对象。

methods, events:
在vue中,所有方法都定义在methods里面。而在wepy中,普通方法是直接定义在class静态方法里面。而events是定义组件间交互的方法。methods中只定义事件方法。

关于computed:

wepy中也有computed,props,data,watch等vue中有的一些属性(没有filter, directive)。
props,data,watch这些基本和vue无异。
但是在wepy中computed计算属性是无法传参的(本人没能找到传参的方法,且官方文档没有提到),在处理一些动态数据的时候,只能通过其他方法来操作。
比如,服务端获取到的的JSON对象内有条时间戳数据需要转换成字符串,我的做法是将时间戳另外传值给子组件,然后在子组件中使用computed对props进行记算。

事件传值:
wepy中的事件可传递一些基本类型的参数,但是需使用双括号。否则获取到的参数是字符串类型。

引用类型的参数可以使用 微信原生的 data- 属性绑定数据,然后在函数中用e.currentTarget.dataset 获取

组件传值:

wepy组件传值的设计思路类似vue 1.0 。这点在官方文档讲得比较详细。需要注意是如果你需要props传递的数据跟随父组件数据变化,要使用sync修饰符。如果是异步获取的服务端数据,必须要在父组件使用 this.$apply()方法来触发子组件的刷新。
wepy中传递数据不能直接像vue中可以传递对象的属性,如 :data="data.someData" (vue)
在wepy中这样的写法目测读不到数据(wepy中冒似没有哪个生命周期能直接观测到数据),我使用的是 :data.sync="data",然后到子组件中使用计算属性计算。

动态绑定class:

在vue中使用 :class="{.........}",就可以达到目的。
在wepy中,要使用 微信原生的绑定语法 class="test-class {{.....}}"
其中 test-class 是不需要动态绑定的class, 双括号中才是需要绑定的class

循环渲染组件:
wepy的循环渲染组件,必须使用 <repeat>标签,或者微信官方的<block>标签(这两个标签都是不会渲染到dom的)否则就不会渲染成功。

wx:if:

wepy中使用wx:if 方法,只会阻止视图渲染,并不会阻止组件初始化。
如果在子组件onLoad 生命周期或者计算属性中使用了一些父级传递过来的动态数据,就会报错。

原文地址:https://www.cnblogs.com/isuansuan/p/11460817.html

时间: 2024-09-27 18:55:28

wepy是一个微信小程序框架的相关文章

[转] 扩展微信小程序框架功能

通过第三方 JavaScript 库,扩展微信小程序框架功能. 扩展微信小程序框架功能(1)——Promise ES6 对 Promise 有了原生的支持,但微信开发者工具更新版本(0.11.112200)后, 移除了开发者工具对 ES6 中Promise 特性原生的支持, 需要引入第三方的 Promise 库. 扩展微信小程序框架功能(2)——Generator Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同. 扩展微信小程序框架功能(3)——函数功能增强

两周撸一个微信小程序

利益相关 无 说明 该小程序代码已开源,点击可查看源码,可随意 star.也可以先扫描下方的小程序码直接体验. 写在前面 前段时间写了一个简单的小程序 QuietWeather,源码在这里,具体实现相关可查看这篇文章:两天撸一个天气应用微信小程序.但是这个 小程序 和 QuietWeather 完全不是一个数量级的.so,该文章梳理内容会有那么一点儿多,想跳过的可以直接拉到最下面... 这里先上效果图,感兴趣的也可以 查看源码 .实际体验可扫描??上面的小程序码. 效果图 PC 开发者工具录制,

知了堂学习笔记-微信小程序框架

开发者文档:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html 一.文件结构 小程序包含一个描述整体程序的app和多个描述各自页面的page. 一个小程序主题部分由三个文件组成,必须放在项目的根目录, 如下: app.js                   必填               小程序逻辑 app.json                必填              小程序公共设置 app.wxss    

微信小程序框架

  框架 小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务. 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上. 响应的数据绑定 框架的核心是一个响应的数据绑定系统. 整个系统分为两块视图层(View)和逻辑层(App Service) 框架可以让数据与视图非常简单地保持同步.当做数据修改的时候,只需要在逻

微信小程序框架集合

UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wemark ★85 - 微信小程序Markdown渲染库 WeZRender ★36 - 微信小程序Canvas增强组件 wetoast ★21 - 仿照微信小程序提供的showToast功能 wxapp-charts ★20 - 微信小程序图表charts组件 WeiXinProject ★18 - 列

撸了一个微信小程序项目

学会一项开发技能最快的步骤就是:准备,开火,瞄准.最慢的就是:准备,瞄准,瞄准,瞄准-- 因为微信小程序比较简单,直接开撸就行,千万别瞄准. 于是乎,趁着今天上午空气质量不错,撸了一个小程序,放在了男性交友网站上了, 我添加了很全的注释,大家赏个star. 地址:https://github.com/yll2wcf/wechat-weapp-lifeTools 功能介绍 功能比较简单,调用了百度ApiStore的接口即时查询空气质量. 我计划多加一些功能,争取把微信小程序提供的功能全用一遍. 也

微信小程序框架分析小练手(二)——天气微信小程序制作

简单的天气微信小程序. 一.首先,打开微信开发者工具,新建一个项目:weather.如下图: 二.进入app.json中,修改导航栏标题为“贵州天气网”. 三.进入index.wxml,进行当天天气情况的界面布局,包括温度.最低温度和最高温度.天气情况.城市.星期.风向情况.如下图: 四.进入index.js,在data里提供天气数据,让这些数据在界面里显示出来: 五.进入index.wxml,将data里提供的天气数据绑定到页面里: 界面效果如下: 六.进入index.wxss,为index.

SAP UI5和微信小程序框架里的全局变量

SAP UI5 in global variable sap.ui there are many useful utility service available, such as current browser and os information. and use sap.ui.getCore().byId, we can get any UI5 control instance by its id: 微信小程序 wx for Wechat mini program is as sap.ui

贴一个微信小程序跳一跳辅助

//此程序根据微信公众号DotNet的文章>net开发一个微信跳一跳辅助而来, 其核心时间系数值直接引用自文章: 1.窗体 using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Diagnostics;using System.Drawing;using System.IO;using System.Linq;using System.Tex