部署wepy框架开发微信小程序

我用的是yarn,如果你使用的是npm,也可以

首先需要安装wepy命令行工具

npm install wepy-cli -g

然后在选定的位置使用脚手架工具创建wepy项目

wepy init standard yy-cabinet
PS C:\Users\gushi\Desktop> wepy init standard yy-cabinet
? Project name yy-cabinet
? Project description 研一智能药剂柜微信小程序项目
? Author gstoken <[email protected]>
? Use ESLint to lint your code? No
? Use Redux in your project? Yes
? Use web transform feature in your project? Yes

   wepy-cli · Generated "yy-cabinet".

接着安装依赖包

yarn install

依赖包安装完成之后就可以尝试build了

wepy build
wepy build --watch //这样做可以监视文件变化自动组件

编译之后会出现dist目录

使用微信web开发者工具打开该目录

重要提醒

  1. 使用微信开发者工具-->添加项目项目目录请选择dist目录。
  2. 微信开发者工具-->项目-->关闭ES6转ES5。 重要:漏掉此项会运行报错。
  3. 微信开发者工具-->项目-->关闭上传代码时样式自动补全。 重要:某些情况下漏掉此项也会运行报错。
  4. 微信开发者工具-->项目-->关闭代码压缩上传。 重要:开启后,会导致真机computed, props.sync 等等属性失效。(注:压缩功能可使用WePY提供的build指令代替,详见后文相关介绍以及Demo项目根目录中的wepy.config.jspackage.json文件。)
  5. 本地项目根目录运行wepy build --watch,开启实时编译。(注:如果同时在微信开发者工具-->设置-->编辑器中勾选了文件保存时自动编译小程序,将可以实时预览,非常方便。)

然后要手动启用Promise

在1.4.1以下版本,wepy生成的项目默认都会加入promise polyfill。

在1.4.1以后的版本,需要用户手动加入,具体方法如下:

yarn add promise-polyfill

//在app.wpy中引入polyfill
import Promise from ‘promise-polyfill‘;
//在app.wpy中使API promise化
export default class extends wepy.app {

    constructor () {
        super();
        this.use(‘promisify‘);
    }

原文地址:https://www.cnblogs.com/jimaojin/p/8521541.html

时间: 2024-11-05 18:53:11

部署wepy框架开发微信小程序的相关文章

mpvue 应用 Vant Weapp框架开发微信小程序

今天在使用mpvue开发微信小程序的过程中需要实现一个底部上拉选择列表的功能,因为之前做过H5微信公众号的开发,使用的就是有赞的Vant-ui,所以第一时间就想到了有赞的Vant Weapp UI框架,就找到了官网,根据官网的操作说明开始一顿操作,但是妈的发现并没有什么卵用, 这是官网上的安装说明,使用npm安装,但本人实属功底太浅,在main.js中不知道怎么import进去,然后就采用第二种方法,就在pages文件夹下面的每一个页面中的main.js中添加usingComponents,但是

使用wepy开发微信小程序的底部导航

前言: 最近公司在做一个微信小程序的项目,用的是类似于vue的wepy框架.我也借此机会学习和实践一下. 小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/ wepy官方文档:https://tencent.github.io/wepy/document.html#/ wepy小程序项目初始化:wepy小程序入门之项目初始化 今天的目标是开发微信小程序的底部导航 效果图: 1.打开编辑器(我用的是vscode),然后打开微信开发者工

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:

纯正商业级应用-Node.js Koa2开发微信小程序服务端

第1章 前言.导学与node.js如何理解Node.js?前端到底要不要学习Node.js?本课程能让你学到什么? 第2章 Koa2的那点事儿与异步编程模型Koa非常的精简,基本上,没有经过二次开发的Koa根本“不能”用.本章我们讲解Koa的重要特性,理解什么是洋葱模型?以及在KOA中如何进行异步编程?很多同学都了解以上知识点,但听完本章,你会有一些不一样的理解,比如:为什么要有洋葱模型?没有会怎样?Koa中间件一定是异步的吗? ... 第3章 路由系统的改造Koa-router需要进行一些改造

MPVUE - 使用vue.js开发微信小程序

MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发者编写 Vue.js 代码,mpvue 将其解析转换为小程序并确保其正确运行. 简单上手mpvue 官方提供了一套quickstart模板. vue init mpvue/mpvue-quickstart my-project 安装好依赖之后,执行npm run dev,将会将小程序文件打包进dis

webstorm开发微信小程序代码提醒(webstorm开发工具)

使用了微信提供的开发工具是真心难用,卡顿厉害.中英文切写注释换相当不爽.还没办法多开窗口,相信大家也遇到过这种现象. 下边我们介绍下webstorm来开发微信小程序的一些配置: 1.首先FileType下Cascading Style Sheet 添加*.wxss 1.png 2.FileType下HTML 添加*.wxml 2.png 3.将其中的wecharCode.jar下载下来,然后在webStorm 的 File -> import settings 中导入即可 3.png 配置已经完

利用WordPress REST API 开发微信小程序从入门到放弃

自从我发布并开源WordPress版微信小程序以来,很多WordPress网站的站长问有关程序开发的问题,其实在文章:<用微信小程序连接WordPress网站>讲述过一些基本的要点,不过仍然有不少人对一些细节不明白,于是我就想着再写一篇比较全面而基础的教程,主要针对入门级别用户,高手就不用看了. WordPress版“守望轩”微信小程序开放源码地址:https://github.com/iamxjb/winxin-app-watch-life.net 至于标题,请原谅我,我标题党了. Word

什么行业适合开发微信小程序?

这段时间,随着微信小程序的系列大动作,商家选择开发微信小程序的越来越多,那么各行业开发微信小程序的优势究竟是什么呢? 总体来说,微信小程序开发优势: 1.便于分享:(小程序或其中任何一个界面都可以任意分享) 2.方便切换:(用户在使用小程序时,可以快速返回聊天) 3.消息推送:(商家可以随时发送商城消息给服务过的用户) 4.历史列表:(用户使用过的小程序会被放入列表,方便查询使用) 5.扫码使用:(用户扫一扫即可使用) 社动电商 微信小程序适用行业: 外卖点餐系统.上门服务系统.交通系统.出门旅

微信+小程序购物系统开发微信小程序营销系统开发

行业+小程序的结合有无限可能性,想要玩转微信小程序,享受流量盛宴,可借助--河南鼎汉科技,帮您快速打造具有个性化特色的微信小程序.微信小程序系统开发平台.微信小程序购物商城系统开发1.8.8-3.8.07-6.8.0.5电/微, 微信小程序 微商城 微信小程序营销系统开发,微信公众平台订阅号,微信小程序购物商城系统开发定制. 在移动互联网时代从来不缺分销系统,随着移动电商.传统电商.传统商业企业纷纷进入社交电商领域,社交电商正在向专业平台化.团队规模化.渠道立体化.运作规范化等趋势发展.微信"小