E企盈营销工具技术服务商 热线:4006-838-530

小程序快速开发(使用Wepy框架)

E企盈直播平台营销卖货系统

前言前几周公司要做小程序开发,在开发之前,首先要确定的就是技术选型,看了一些资料,用Wepy能快速搭建好项目,开发起来一些语法、写法跟Vue相似,于是决定用wepy开发。下面就来简单的说说wepy的一些优点和相关步骤:WePY优点 1. 开发风格接近 Vue.js           + 支持 `组件化` 开发           + 支持 `props` 传值           + 支持 `data` 数据           + 支持 `methods` 处理函数           + 支持 `computed` 计算属性           + 支持 `@` 绑定元素的处理事件 `bindtap` , `bindinput`2. 支持 Promise 和 ES6 新特性 、async 和 await3. 支持 Less 、 Sass 等 CSS 预编译语言4. 支持 npm 第三方资源5. 对小程序本身的优化,如请求列对处理,优雅的事件处理,生命周期的补充,性能的优化等等 搭建WePY项目 1. 全局安装 `WePY` 命令行工具:    npm i wepy-cli -g2. 创建 `WePY` 项目:    wepy init standard [项目名称]3. 切换到项目根目录,安装所需依赖项:    cd 项目名称npm install4. 开启实时编译:    wepy build –watch 到此,小程序项目就搭建起来了,开启实时编译之后就会有一个dist文件夹,现在就可以打开从官网上下载的微信开发工具,导入创建好的项目(只导入dist文件夹就好),输入appID,就可以开启小程序之旅了!!!配置微信开发者工具出现脚本错误或者未正确调用 Page()1. `微信开发者工具`–`项目`–`关闭ES6转ES5`。 重要:漏掉此项会运行报错。2. `微信开发者工具`–`项目`–`关闭上传代码时样式自动补全`。 重要:某些情况下漏掉此项也会运行报错。3. `微信开发者工具`–`项目`–`关闭代码压缩上传`。 重要:开启后,会导致真机computed, props.sync 等等属性失效。(注:压缩功能可使用WePY提供的build指令代替,详见后文相关介绍以及Demo项目根目录中的`wepy.config.js`和`package.json`文件。),如下图:wepy项目创建界面vsCode中设置 `.wpy` 文件代码高亮1. 在 Code 里先安装 Vue 的语法高亮插件 `Vetur`。2. 打开任意 `.wpy` 文件–点击右下角的选择语言模式,默认为`纯文本—在弹出的窗口中选择 `.wpy 的配置文件关联…`—在`选择要与 .wpy 关联的语言模式` 中选择 `Vue`。点开.wpy,代码结构跟VUE几乎完全一样,wxml对应的是template标签里面的内容,js是script标签,wxss对应的是style lang=’less’ wepy项目中发起数据请求 注意: 在小程序项目中,没有 浏览器的概念,因此,也就没有 Ajax 的概念; 只要 请求的数据接口,是 HTTPS 协议的,同时,请求的接口域名,配置到了后台的 `安全域名`中,则,小程序就能够正常请求接口数据;如果是本地开发,也可以用http的url,只要把不校验合法域名勾上就行。 代码示例:注意使用 `$apply()` 函数通知数据变化; 需注意的是,在异步函数中更新数据的时,必须手动调用`$apply`方法,才会触发脏数据检查流程的运行。尾声到此项目的第一个界面已经开发完,由于第一次使用wepy,不是很熟悉,分享出来共勉,后续遇到其他问题会继续更新。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序快速开发(使用Wepy框架)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏