经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 微信小程序 » 查看文章
转载：wepy框架入门
来源：cnblogs　　作者：子钦加油　　时间：2019/9/25 9:25:08　　对本文有异议

转载：https://www.jianshu.com/p/93d5a4b99777

 

安装 wepy 命令行工具。

  1. npm install wepy-cli -g

在开发目录生成开发DEMO。

  1. wepy new myproject

开发实时编译。

  1. wepy build --watch

 

 

 

项目目录结构

  1.     dist
  2.     node_modules
  3.     src
  4.         components
  5.             com_a.wpy
  6.             com_b.wpy
  7.         pages
  8.             index.wpy
  9.             page2.wpy
  10.         app.wpy
  11.     package.json

使用微信开发者工具新建项目，本地开发选择dist目录。
微信开发者工具 --> 项目 --> 关闭ES6转ES5。
本地项目根目录运行wepy build --watch，开启实时编译。

官方DEMO代码：

  1. //index.js
  2. //获取应用实例
  3. var app = getApp()
  4. Page({
  5.   data: {
  6.     motto: 'Hello World',
  7.     userInfo: {}
  8.   },
  9.   //事件处理函数
  10.   bindViewTap: function() {
  11.     console.log('button clicked')
  12.   },
  13.   onLoad: function () {
  14.     console.log('onLoad')
  15.   }
  16. })

 

基于wepy的实现：

  1. import wepy from 'wepy';
  3. export default class Index extends wepy.page {
  5.     data = {
  6.         motto: 'Hello World',
  7.         userInfo: {}
  8.     };
  9.     methods = {
  10.         bindViewTap () {
  11.             console.log('button clicked');
  12.         }
  13.     };
  14.     onLoad() {
  15.         console.log('onLoad');
  16.     };
  17. }

 

wepy支持组件化开发
组件示例代码：

  1. // index.wpy
  2. <template>
  3.     <view>
  4.         <component id="pannel" path="pannel"></component>
  5.         <component id="counter1" path="counter"></component>
  6.         <component id="counter2" path="counter"></component>
  7.         <component id="list" path="list"></component>
  8.     </view>
  9. </template>
  10. <script>
  11. import wepy from 'wepy';
  12. import List from '../components/list';
  13. import Panel from '../components/panel';
  14. import Counter from '../components/counter';
  16. export default class Index extends wepy.page {
  18.     config = {
  19.         "navigationBarTitleText": "test"
  20.     };
  21.     components = {
  22.         panel: Panel,
  23.         counter1: Counter,
  24.         counter2: Counter,
  25.         list: List
  26.     };
  27. }
  28. </script>

 

  1. 官方DEMO：
  1. project
  2.     pages
  3.         index
  4.             index.json
  5.             index.js
  6.             index.wxml
  7.             index.wxss
  8.         log
  9.             log.json
  10.             log.wxml
  11.             log.js
  12.             log.wxss
  13.     app.js
  14.     app.json
  15.     app.wxss

 

使用wepy框架后目录结构：

  1. project
  2.     src
  3.         pages
  4.             index.wpy
  5.             log.wpy
  6.         app.wpy

 

wepy默认使用babel编译，支持ES6 / 7的一些新特性

示例代码：

  1. import wepy from 'wepy';
  3. export default class Index extends wepy.page {
  5.     getData() {
  6.         return new Promise((resolve, reject) => {
  7.             setTimeout(() => {
  8.                 resolve({data: 123});
  9.             }, 3000);
  10.         });
  11.     };
  12.     async onLoad() {
  13.         let data = await this.getData();
  14.         console.log(data.data);
  15.     };
  16. }

 

原有代码：

  1. onLoad = function () {
  2.     var self = this;
  3.     wx.login({
  4.         success: function (data) {
  5.             wx.getUserInfo({
  6.                 success: function (userinfo) {
  7.                     self.setData({userInfo: userinfo});
  8.                 }
  9.             });
  10.         }
  11.     });
  12. }

 

基于wepy实现代码：

  1. async onLoad() {
  2.     await wx.login();
  3.     this.userInfo = await wx.getUserInfo();
  4. }

 

执行wepy new demo后，会生成类似配置文件。

  1. {
  2.   "wpyExt": ".wpy",
  3.   "sass": {},
  4.   "less": {},
  5.   "babel": {}
  6. }
  7. <style type="less" src="page1.less"></style>
  8. <template type="wxml" src="page1.wxml"></template>
  9. <script>
  10.     // some code
  11. </script>

 

程序入口app.wpy

  1. <style type="less">
  2. /** less **/
  3. </style>
  4. <script>
  5. import wepy from 'wepy';
  6. export default class extends wepy.app {
  7.     config = {
  8.             "pages":[
  9.             "pages/index/index"
  10.         ],
  11.         "window":{
  12.             "backgroundTextStyle": "light",
  13.             "navigationBarBackgroundColor": "#fff",
  14.             "navigationBarTitleText": "WeChat",
  15.             "navigationBarTextStyle": "black"
  16.         }
  17.     };
  18.     onLaunch() {
  19.         console.log(this);
  20.     }
  21. }
  22. </script>

 


  1. wepy页面index.wpy
  1. <style type="less">
  2. /** less **/
  3. </style>
  4. <template type="wxml">
  5.     <view>
  6.     </view>
  7.     <component id="counter1" path="counter"></component>
  8. </template>
  9. <script>
  10. import wepy form 'wepy';
  11. import Counter from '../components/counter';
  12. export default class Index extends wepy.page {
  14.     config = {};
  15.     components = {counter1: Counter};
  17.     data = {};
  18.     methods = {};
  20.     events = {};
  21.     onLoad() {};
  22.     // Other properties
  23. }
  24. </script>

 

wepy组件com.wpy

  1. <style type="less">
  2. /** less **/
  3. </style>
  4. <template type="wxml">
  5.     <view>  </view>
  6. </template>
  7. <script>
  8. import wepy form 'wepy';
  9. export default class Com extends wepy.component {
  11.     components = {};
  13.     data = {};
  14.     methods = {};
  16.     events = {};
  17.     // Other properties
  18. }
  19. </script>

 

wepy 组件通信与交互

  1. wepy.component基类提供三个方法$broadcast，$emit，$invoke
  3. $this.$emit('some-event', 1, 2, 3, 4);
  4. 组件的事件监听需要写在events属性下，如：
  6. import wepy form 'wepy';
  7. export default class Com extends wepy.component {
  9.     components = {};
  11.     data = {};
  12.     methods = {};
  14.     events = {
  15.         'some-event': ($event, ...args) {
  16.                console.log(`${this.name} receive ${$event.name} from ${$event.source.name}`);
  17.         }
  18.     };
  19.     // Other properties
  20. }
  1. $invoke$invoke是一个组件对另一个组件的直接调用，通过传入的组件路径找到相应组件，然后再调用其方法。
  2. 如果想在Page_Index中调用组件A的某个方法：
  4. this.$invoke('ComA', 'someMethod', 'someArgs');
  5. 如果想在组件A中调用组件G的某个方法：
  7. this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');

 

小程序通过Page提供的setData方法去绑定数据，如：

  1. this.setData({title: 'this is title'});

wepy数据绑定方式

  1. this.title = 'this is title';

在函数运行周期之外的函数里去修改数据需要手动调用$apply方法。如：

  1. setTimeout(() => {
  2.     this.title = 'this is title';
  3.     this.$apply();
  4. }, 3000);

 

// 官方

  1. wx.request({
  2.     url: 'xxx',
  3.     success: function (data) {
  4.         console.log(data);
  5.     }
  6. });

// wepy 使用方式
// request 接口从只接收Object变为可接收String

  1. wx.request('xxxx').then((d) => console.log(d));

 

优化事件参数传递

  1. // 官方
  2. <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
  3. Page({
  4.   tapName: function(event) {
  5.     console.log(event.currentTarget.hi)// output: WeChat
  6.   }
  7. });
  9. // wepy 建议传参方式
  10. <view id="tapTest" data-wepy-params="1-wepy-something" bindtap="tapName"> Click me! </view>
  12. events: {
  13.     tapName (event, id, title, other) {
  14.         console.log(id, title, other)// output: 1, wepy, something
  15.     }
  16. }

 

改变数据绑定方式

  1. // 官方
  2. <view> {{ message }} </view>
  4. onLoad: function () {
  5.     this.setData({message: 'hello world'});
  6. }
  9. // wepy
  10. <view> {{ message }} </view>
  12. onLoad () {
  13.     this.message = 'hello world';
  14. }

 

组件代替模板和模块

  1. // 官方
  2. <!-- item.wxml -->
  3. <template name="item">
  4.   <text>{{text}}</text>
  5. </template>
  6.  
  7. <!-- index.wxml -->
  8. <import src="item.wxml"/>
  9. <template is="item" data="{{text: 'forbar'}}"/>
  10.  
  11. <!-- index.js -->
  12. var item = require('item.js')
  17. // wepy
  18. <!-- /components/item.wpy -->
  19.  <text>{{text}}</text>
  20.  
  21. <!-- index.wpy -->
  22. <template>
  23.     <component id="item"></component>
  24. </template>
  25. <script>
  26.     import wepy from 'wepy';
  27.     import Item from '../components/item';
  28.     export default class Index extends wepy.page {
  29.         components = { Item }
  30.     }
  31. </script>

  1. WePY Demo
  1. <style lang="less">
  2.     @color: #4D926F;
  3.     .userinfo {
  4.         color: @color;
  5.     }
  6. </style>
  7. <template lang="pug">
  8.     view(class='container')
  9.         view(class='userinfo' @tap='tap')
  10.             mycom(:prop.sync='myprop' @fn.user='myevent')
  11.             text {{now}}
  12. </template>
  13.  
  14. <script>
  15.     import wepy from 'wepy';
  16.     import mycom from '../components/mycom';
  18.     export default class Index extends wepy.page {
  19.         
  20.         components = { mycom };
  21.         data = {
  22.             myprop: {}
  23.         };
  24.         computed = {
  25.             now () { return +new Date(); }
  26.         };
  27.         async onLoad() {
  28.             await sleep(3);
  29.             console.log('Hello World');
  30.         }
  31.         sleep(time) {
  32.             return new Promise((resolve, reject) => setTimeout(() => resolve, time * 1000));
  33.         }
  34.     }
  35. </script>

 

登录相关API wx.login。
获取用户信息API wx.getUserInfo。
Storage相关 wx.getStorage，wx.setStorage，wx.clearStorage。

开发

  1. 目录结构：
  3. src
  4.     components
  5.         alpha.wpy --- 联系人
  6.         chatboard.wpy --- "聊天面板" 组件
  7.         contact.wpy --- "联系人" 组件
  8.         discovery.wpy --- "发现" 组件
  9.         input.wpy --- 聊天页输入框组件
  10.         list.wpy --- 菜单列表组件
  11.         me.wpy --- "我" 组件
  12.         message.wpy --- message 组件
  13.         tab.wpy --- tab 组件
  14.     pages
  15.         chat.wpy --- 聊天页
  16.         index.wpy --- 首页
  17.     app.wpy --- 小程序入口

 

image.png
  1. src/pages/index.wpy：
  3. <style type="sass">
  4.     .body, .tab_item {
  5.         height: 100%;
  6.     }
  7. </style>
  8. <template>
  9.     <view class="body">
  10.         <view class="tab_item tab_message">
  11.             <component id="message"></component>
  12.         </view>
  13.         <view class="tab_item tab_contact">
  14.             <component id="contact"></component>
  15.         </view>
  16.         <view class="tab_item tab_discovery">
  17.             <component id="discovery"></component>
  18.         </view>
  19.         <view class="tab_item tab_me">
  20.             <component id="me"></component>
  21.         </view>
  22.         <component id="tab"></component>
  23.     </view>
  24. </template>
  25. src/pages/chat.wpy:
  27. <style type="sass">
  28.     .body {
  29.         height: 100%;
  30.         background-color: #ededed;
  31.     }
  32. </style>
  33. <template>
  34.     <view class="body">
  35.         <component id="chartboard"></component>
  36.         <component id="input"></component>
  37.     </view>
  38. </template>

 

 
image.png
 
image.png
  1. import m_contacts from '../mocks/contact';
  2. import m_history from '../mocks/history';
  4. export default {
  5.     
  6.     // 拉取用户信息
  7.     getUserInfo () {},
  8.     
  9.     // 拉取与某个用户的聊天历史记录
  10.     getHistory (id) {},
  11.     
  12.     // 拉取首页聊天列表
  13.     getMessageList () {},
  15.     // 发送聊天信息
  16.     sendMsg (to, msg, type = 'text') {}
  17. }
  1. <template>
  2.     <view class="message">
  3.         <block wx:for="{{list}}" wx:for-index="index" wx:for-item="item">
  4.             <view class="item" bindtap="select" data-wepy-params="{{item.id}}">
  5.                 <view class="header">
  6.                     <image class="img" src="{{item.icon}}"></image>
  7.                 </view>
  8.                 <view class="content">
  9.                     <view class="name">{{item.name}}</view>
  10.                     <view class="lastmsg">{{item.lastmsg}}</view>
  11.                 </view>
  12.             </view>
  13.         </block>
  14.     </view>
  15. </template>
  16. <script>
  17.     import wepy from 'wepy';
  18.     import api from '../common/api';
  20.     export default class Message extends wepy.component {
  22.         data = {
  23.             list: []
  24.         };
  25.       
  26.         methods = {
  27.             select (evt, id) {
  28.                 wx.navigateTo({url: 'chat?id=' + id});
  29.             }
  30.         };
  31.         async loadMessage () {
  32.             this.list = await api.getMessageList();
  33.             this.$apply();
  34.         }
  35.     }
  36. </script>
  1. // src/pages/index.wpy
  2. onShow() {
  3.     this.$invoke('message', 'loadMessage');
  4. }
  1. src/pages/index：
  3. <template>
  4.     <view class="body">
  5.         <view class="tab_item tab_message" hidden="{{currentTab != 0}}">
  6.             <component id="message"></component>
  7.         </view>
  8.         <view class="tab_item tab_contact" hidden="{{currentTab != 1}}">
  9.             <component id="contact"></component>
  10.         </view>
  11.         <view class="tab_item tab_discovery" hidden="{{currentTab != 2}}">
  12.             <component id="discovery"></component>
  13.         </view>
  14.         <view class="tab_item tab_me" hidden="{{currentTab != 3}}">
  15.             <component id="me"></component>
  16.         </view>
  17.         <component id="tab"></component>
  18.     </view>
  19. </template>
  20.  
  21. <script>
  22.     //....
  23.     changeTab (idx) {
  24.         this.currentTab = +idx;
  25.         this.$apply();
  26.     }
  27. </script>
  1. <script>
  2.     import wepy from 'wepy';
  4.     export default class Tab extends wepy.component {
  5.         data = {
  6.             active: 0,
  7.         };
  8.         methods = {
  9.             change (evt, idx) {
  10.                 this.active = +idx;
  11.                 this.$parent.changeTab(idx);
  12.             }
  13.         };
  14.     }
  15. </script>
  1. parent.wpy
  2. <child :item.sync="myitem" />
  3.  
  4. <repeat for="{{list}}" item="item" index="index">
  5.    <item :item="item" />
  6. </repeat>

 

 

原文链接：http://www.cnblogs.com/zmdComeOn/p/11577436.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

微信小程序热门文章

  • 如何在微信小程序中实现音视频通话
  • 微信小程序调用摄像头实现拍照功能
  • 微信小程序隐私保护协议修改方法 uniapp
  • 微信小程序实现简单的购物车功能
  • 微信小程序访问mysql数据库流程详解
  • 微信小程序实现计算器案例
  • 微信小程序时间轴实现方法示例
  • 微信小程序使用uni-app开发小程序及部分功能实现详解
  • 微信小程序实现聊天室功能
  • 微信小程序底部tabBar遮挡内容的简单处理方法

    • 微信小程序推荐文章

  • 微信小程序车牌键盘输入组件（支持单个删除更改，支持赋值，支持新能源）
  • 小程序优化：第三方SDK过大解决方案
  • .NET生成微信小程序推广二维码
  • 微信小程序动态生成表单来啦！你再也不需要手写表单了！
  • web应用及微信小程序版本更新检测方案实践
  • 微信小程序隐私保护协议修改方法 uniapp
  • 如何在微信小程序中实现音视频通话
  • 微信小程序抢红包高并发设计
  • uni-app + .NET 7实现微信小程序订阅消息推送
  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号