wepy使用
其他
2021-04-05 01:22:47
阅读次数: 0
wepy框架的安装和使用
安装命令
npm install wepy-cli -g
创建wepy项目
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520113603774.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
wepy项目与小程序项目的关系
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520113634480.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
实时编译wepy项目
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520113658963.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
wepy项目目录结构
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520113727891.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
加载并配置wepy项目
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020052011375378.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
.wpy文件使用说明
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520113824261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
lang和src属性
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520113848313.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
配置代码高亮
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520113915877.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
小程序入口文件app.wpy
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520113940601.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
扫描二维码关注公众号,回复:
13132887 查看本文章
使用app.wpy全局配置小程序外观
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520114005365.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
页面.wpy文件的script标签组成结构
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520114030983.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
wepy框架的开发规范
自定义默认首页
创建home首页
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520114056615.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
设置默认首页
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520114120706.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
创建.wpy页面注意事项
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520114145472.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
为wepy页面绑定事件并传参
使用@绑定事件处理函数
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520114208540.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
事件传参的优化写法
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520114230431.png)
定义事件处理函数的注意点
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520114251920.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
wepy页面的数据绑定
使用data定义私有数据
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520114314481.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
将文本框与data做双向数据绑定
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520114338575.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
使用wxs脚本
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520114359930.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
wepy页面中发起数据请求
配置promisify启用async和await
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520114422293.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
使用wepy.request发起get请求
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020052011444482.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
使用wepy.request发起post请求
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520114507415.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
异步更新数据
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520114531256.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODAyMTcw,size_16,color_FFFFFF,t_70)
转载自blog.csdn.net/qq_42802170/article/details/106232002