wepy

引言 最近公司需要做一个小程序的项目，正好发现了wepy这么一个跟vue的开发方式类似的框架，不过说起来跟vue类似，但是用起来还真不是那么简单。当然还是先给出官方文档链接，方便查阅，有些细节还真的是在那只言片语间了。 微信小程序开发文档中有个 搜索按钮 ，不过不要相信它是万能的，很多东西就是搜索不到的，比如arrayBufferToBase64这样的api，所以在使用某个功能的时候，尽可能找到该功能对应的组件、API 官方文档 小程序的官方文档 wepy官方文档 下面是已经踩过的 坑 标签中的指令简写 跟Vue类似 对于动态赋值的属性可以使用 :attr="value" 的方式 对于绑定事件可以使用@click="fn"的方式 data使用注意点 对于视图中需要用到的数据，应该事先在data中定义一下，哪怕此时没有数据，也应该定义一个空值 WePY中的methods的使用 只能声明页面的bind、catch事件，不能声明自定义方法 自定义方法应该跟methods平级 页面跳转 navigateTo() 和 redirectTo() 不允许跳转到 tabbar 页面， 只能用 switchTab() 跳转到 tabbar 页面 文件上传 上传文件没有传统html中的文件域( <input type="file"/> )，要想上传文件只能使用API： uploadFile()

安装脚手架 npm install -g wepy-cli wepy init standard my-project 切换至项目目录 初始化项目 npm install 开启实时编译 wepy build --watch 来源： https://www.cnblogs.com/summer06/p/11434119.html

1 <style> 2 </style> 3 4 <template> 5 <view>监听值:{{num}}</view> 6 </template> 7 8 9 <script> 10 import wepy from 'wepy'; 11 12 let _page,_this; 13 14 export default class ep extends wepy.page { 15 data = { 16 num: 1 17 }; 18 19 // 监听器函数名必须跟需要被监听的data对象中的属性num同名， 20 // 其参数中的newValue为属性改变后的新值，oldValue为改变前的旧值 21 watch = { 22 num(newValue, oldValue) { 23 console.log(`num value: ${oldValue} -> ${newValue}`); 24 } 25 }; 26 27 // 每当被监听的属性num改变一次，对应的同名监听器函数num()就被自动调用执行一次 28 onLoad() { 29 _this = this; 30 setInterval(() => { 31 _this.num++; 32 _this.$apply(); 33 }, 1000); 34 } 35 } 36 </script> 关于

1、根据官方文档： $ npm install @wepy/cli -g # 全局安装 WePY CLI 工具 $ wepy init standard myproj # 使用 standard 模板初始化项目 $ cd myproj # 进入到项目目录 $ npm install # 安装项目依赖包 $ npm run dev # 监听并且编译项目 报错： Cannot read property 'update' of undefined解决方法： package.json 来源： https://www.cnblogs.com/Mvloveyouforever/p/11414372.html

Wepy框架 它是一款类Vue框架，在代码风格上借鉴了Vue，本身和Vue没有任何关系。 mpVue框架 它是从整个Vue的核心代码上经过二次开发而形成的一个框架，相当于是给Vue本身赋能，增加了开发微信小程序的能力。 三者的区别图： 使用mpVue时需要注意的点： 1. 在模板中，动态插入HTML的v-html指令不可用 这条很好理解，小程序的界面并不是基于浏览器的BOM/DOM的，所以不能动态的在界面模板里直接插入HTML片段来显示。 题外话，如果有在小程序里插入html片段的需求怎么办？可以用 组件或者wxParse( https://github.com/icindy/wxParse)来实现 。 2. 在模板中，用于数据绑定的双括号语法{{}}中的表达式功能存在诸多限制 在Vue本身的模板内双括号语法中，我们可以对绑定变量进行比较丰富的处理，比如： 可以调用methods下的函数， 例如： <template> <div>{{ formatMessage(msg) }}</div> </template> <script> export default { data() { return { msg: "Hello,World" } }, methods: { formatMessage(str) { return str.trim().split(',').join('#

一、报错图 二、解决方案 主要是windows平台缺少编译环境， 1、先运行： npm install -g node-gyp 2、然后运行cmd：（右键点击：以管理员身份运行） 输入： npm install --global -production windows-build-tools 成功图： 3.在项目根目录下新建一个 .npmrc ，目的是把国外的npm源指向国内的镜像。 内容： phantomjs_cdnurl=http://cnpmjs.org/downloadssass_binary_site=https://npm.taobao.org/mirrors/node-sass/registry=https://registry.npm.taobao.org 4.卸载node-sass： npm uninstall node-sass 安装node-sass： npm install node-sass 5.[Error] 未发现相关 less 编译器配置,请检查wepy.config.js文件。 npm install less -d 6.运行： wepy build --watch 来源： https://www.cnblogs.com/GuliGugaLiz/p/11369903.html

wx-miniprogram-boilerplate 基于Gulp构建的微信小程序开发工作流 链接: https://pan.baidu.com/s/1lwZ4nPRpubw33pEfbsQrlw 提取码: k54r 适用场景 目前开发微信小程序时，可选的技术方案大概有四种，分别是： 微信小程序原生开发 使用wepy框架 使用mpvue框架 使用taro框架 几种开发方案，各有优劣。使用第三方框架开发，可以享受框架带来的开发便利，但对于小程序新增的诸多特性和功能，比如 WXS模块 、 自定义组件 和 插件 等，受制于框架实现，无法使用。 而原生小程序的开发模式，又过于简陋，就样式来说，写惯了less，stylus和sass的同学一定无法忍受wxss的这种写法，基于此，决定使用 gulp 自动化工具来构建一套微信小程序开发的基础模板，在完全保留微信小程序功能和特性的基础上，又可以的使用 less 来写样式，同时加入图片压缩，命令行快速创建模板等特性，如此开发，快哉，快哉！ 特性 基于 gulp+less 构建的微信小程序工程项目 项目图片自动压缩 ESLint代码检查 使用命令行快速创建 page 、 template 和 component 支持生产环境打包 Getting Started 0. 开始之前，请确保已经安装node和npm，全局安装gulp-cli $ npm

原文链接： https://ant-move.github.io/website/blog/2019/07/30/miniprogram-development.html 继微信正式推出微信小程序后，各个大厂陆续发布了各自的小程序平台 —— 支付宝小程序、百度小程序、头条小程序，跨小程序平台开发也成为了众多小程序开发者要面临的问题。 Antmove - 小程序跨平台解决方案 小程序开发血泪史 小程序发展初期 框架不稳定 更新频繁 bug 众多 随着微信小程序的发展，微信小程序以基本不存在上述的问题，而其它新兴的小程序厂商则还在此阶段，对于小程序开发者来说，如果要接入微信小程序之外的平台，以上的问题是技术方案评估环境必须要衡量的问题。 小程序发展中期 开发体验提升 组件式开发需求 与 web 开发技术生态的融合 在这个阶段，小程序开发者追求的是开发体验，在 web 框架蓬勃发展，开发工具生态飞速完善的环境下，槽糕的小程序开发体验是用户不能忍受的，这个阶段也出现了许多的小程序框架极力的解决这个问题，如 wepy、mpvue、taro 等。 小程序发展成熟期 多平台支持需求 包体积 性能 到今年以来，除微信小程序平台外，其它厂商小程序平台也得到了极大的推动发展，这时小程序跨平台能力就显得尤为重要，同时与之相对的包体积控制小程序性能也成为关注点，这也是目前众多企业和开发者面临的问题。