我用的是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. Asp.Net MVC及Web API框架配置会碰到的几个问题及解决方案 (精髓)

    前言 刚开始创建MVC与Web API的混合项目时,碰到好多问题,今天拿出来跟大家一起分享下.有朋友私信我问项目的分层及文件夹结构在我的第一篇博客中没说清楚,那么接下来我就准备从这些文件怎么分文件夹说 ...

  3. markdown 语法小结

    1 标题 # 一级标题 ## 二级标题 2  字体加粗和斜体 *斜体* **加粗** 3.引用 > 4.换行 空行 或两个空格+tab 5.无序列表 + 第一个 + 第二个 - 第一个 - 第二 ...

  4. python全栈开发day51-jquery插件、@media媒体查询、移动端单位、Bootstrap框架

    一.昨日内容回顾 技术行业 (1)ajax技术 XMLHttpRequest() <1>创建XMLHttpRequest()对象 <2>检测状态(通过readyState的改变 ...

  5. Python_shelve模块

    shelve:对象持久化的保存的模块,将对象保存到文件里  (默认的数据存储文件为二进制),可持久化任何pickle可支持的Python数据格式 shelve 中唯一的方法: shelve.open( ...

  6. Flink--3种分区方式

    partitionByHash //TODO partitionByHash val data = new mutable.MutableList[(Int, Long, String)] data. ...

  7. Zabbix微信报警触发

    (1)         企业应用-创建应用 1.除了对个人添加微信报警之外,还可以添加不同管理组,接受同一个应用推送的消息, 成员账号,组织部门ID,应用Agent ID,CorpID和Secret, ...

  8. day8.登陆注册简单实现

    username = input('请输入注册的用户名:') password = input('请输入注册名的密码:') with open('list_of_info',mode='w',enco ...

  9. appium---第一个脚本--启动一个已存在的app

    1.可以使用android-sdk中的aapt工具 ①.选择一个版本的build_tools,加入path环境变量中 ②.验证aapt环境是否正常 3.下载你要测试的包,放入某一地址中(随意):aap ...

  10. maven启动tomcat访问报404(url中没有项目名)

    [INFO] Running war on http://localhost:8080/js_001(红色部分是项目名,要是没有的话是不能访问项目资源的) 但是我仍然不知道为什么有些maven项目却有 ...