我用的是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 <gushihao@hotmail.com>
? 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');
}

然后安装weui-wxss界面框架

yarn add weui-wxss

然后在app.wpy里面引入

@import url("../node_modules/weui-wxss/dist/app.wxss");

 

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

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

    今天在使用mpvue开发微信小程序的过程中需要实现一个底部上拉选择列表的功能,因为之前做过H5微信公众号的开发,使用的就是有赞的Vant-ui,所以第一时间就想到了有赞的Vant Weapp UI框架 ...

  2. 基于mpvue的框架开发微信小程序(搭建环境)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_103 美团很早就开源了mpvue这个项目,如此看来,美团可不仅仅是一家团购网站,真正的技术驱动型企业,使得我们多了一种用来开发微信 ...

  3. 使用wepy框架搭建微信小程序采坑记(一)

    1.什么是wepy 这个框架是腾讯内部出的一个类MVVM的小程序开发框架.大体上来说语法是类VUE的,所以如果有VUE开发经验的话迁移成本会低一些.至于具体的怎么使用我就不赘言了,有问题查文档(官方文 ...

  4. 使用uni-app开发微信小程序

    uni-app 开发微信小程序 前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目, ...

  5. 用Vue.js开发微信小程序:开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  6. 使用wepy开发微信小程序商城第二篇:路由配置和页面结构

    使用wepy开发微信小程序商城 第二篇:路由配置和页面结构 前言: 最近公司在做一个微信小程序的项目,用的是类似于vue的wepy框架.我也借此机会学习和实践一下. 小程序官方文档:https://d ...

  7. 使用wepy开发微信小程序商城第三篇:购物车(布局篇)

    使用wepy开发微信小程序商城 第三篇:购物车(布局篇) 前两篇如下: 使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 基于上两篇内容,开始 ...

  8. 使用wepy开发微信小程序商城第一篇:项目初始化

    使用wepy开发微信小程序商城 第一篇:项目初始化 前言: wepy小程序项目初始化的操作,官方文档看了好几遍,感觉写得不是很清楚. 这篇写得挺好的:小程序开发之wepy 1.初始化项目 (1)全局安 ...

  9. 使用Vue开发微信小程序:mpvue框架

    使用Vue开发微信小程序:mpvue框架:https://www.jianshu.com/p/8f779950bfd9

随机推荐

  1. 蓝桥杯第十届真题B组(2019年)

    2019年第十届蓝桥杯大赛软件类省赛C/C++大学B组# 试题 A:组队# 本题总分:5分[问题描述]作为篮球队教练,你需要从以下名单中选出 1号位至 5号位各一名球员,组成球队的首发阵容.每位球员担 ...

  2. 让Mysql支持Emoji表情,解决[Err] 1366 - Incorrect string value: '\xF0\xA3\x84\x83'

    mysql insert内容包含表情或者unicode码时候,插入Mysql时失败了,报如下异常: java.sql.SQLException: Incorrect string value: '\x ...

  3. dump增加的表数据

    备份mysql数据库表中,增加的部分 前提条件: 备份库和正式库表结构一样: 表名不一样可以改: 备份库:192.168.1.10 正式库:192.168.1.11 获取当前"备份" ...

  4. module.exports与exports的区别

    引言 每一个node.js执行文件,都自动创建一个module对象,同时,module对象会创建一个叫exports的属性,初始化的值是 {} 例子 foo.js exports.a = functi ...

  5. ubuntud安装Adobe Flash Player / Plugin

    1.https://get.adobe.com/flashplayer/ , select tar.gz for other Linux, download 2.Unpack the tar.gz f ...

  6. C# 之 6.0 新特性

    VS2015内置的C#版本为6.0,学习了一下C#6.0的新特性. 特性1:自动属性初始化 (Initializers for auto-properties) 以前我们是这么写的 public st ...

  7. centos的基本操作

    1.ssh连接阿里云一段时间不操作自动断开打开/etc/ssh/sshd_config添加或修改: ClientAliveInterval 120ClientAliveCountMax 0 2.挂载数 ...

  8. Apache ActiveMQ 远程代码执行漏洞 (CVE-2016-3088)案例分析

    部署ActiveMQ运行环境 在linux上部署apache-activemq-5.10.0-bin.tar.gz 通过tar -zxvf  apache-activemq-5.10.0-bin.ta ...

  9. sql的with as用法

    http://www.cnblogs.com/linjiqin/archive/2013/06/24/3152667.html

  10. Hdu-2008

    杭电OJ-2008 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2008 #include<stdio.h> int main() { i ...