微信小程序wepy框架入门教程-搭建开发环境(一)

简介: 微信小程序wepy框架入门教程-搭建开发环境(一)

1:安装node

端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,WePY借鉴了Vue.js(后文简称Vue)的语法风格和功能特性,vue的运行是要依赖于node的npm的管理工具来实现,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。


安装成功之后显示如下,查看版本,安装成功。

2:安装全局淘宝npm镜像

进入D盘(当然可以根据你自己的选择来安装路径)全局安装镜像。由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.

淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

安装成功之后显示如下,查看版本,安装成功。

3:全局安装或更新WePY命令行工具

npm install wepy-cli -g

4:初始化一个项目myproject

注意版本,因为我的版本是1.7.3的

1.7.0之后的版本使用 wepy init standard myproject 初始化项目

wepy init standard myproject

暂时可以一路回车,后续如果遇到要做具体的项目的时候,可以根据项目需要填写。

打开d盘,可以看见初始化的项目

目录结构

├── dist                   微信开发者工具指定的目录(该目录由WePY的build指令自动编译生成,请不要直接修改该目录下的文件)
├── node_modules           
├── src                    代码编写的目录(该目录为使用WePY后的开发目录)
|   ├── components         WePY组件目录(组件不属于完整页面,仅供完整页面或其他组件引用)
|   |   ├── com_a.wpy      可复用的WePY组件a
|   |   └── com_b.wpy      可复用的WePY组件b
|   ├── pages              WePY页面目录(属于完整页面)
|   |   ├── index.wpy      index页面(经build后,会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件)
|   |   └── other.wpy      other页面(经build后,会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件)
|   └── app.wpy            小程序配置项(全局数据、样式、声明钩子等;经build后,会在dist目录下生成app.js、app.json和app.wxss文件)
└── package.json           项目的package配置

5:进入myproject

cd myproject

6:安装依赖

在新建的项目里面安装需要的依赖包

npm  install

安装完成之后可以看见,文件里面多出了两个依赖文件

7:进行实时编译

wepy build --watch

8:在微信开发者工具打开

可以看到,刚才创建的项目

注意:因为小程序开发工具对wepy文件不太友好,无法直接在开发者工具里面打开,所以要另外选择编辑器编写代码,开发者工具可进行调试和查看效果


相关文章
|
5天前
|
小程序 开发者 Windows
轻量、可靠的小程序 UI 框架 -- Vant Weapp的安装和使用
轻量、可靠的小程序 UI 框架 -- Vant Weapp的安装和使用
6 1
|
20天前
|
小程序 前端开发 JavaScript
微信小程序MINA框架
【6月更文挑战第4天】微信小程序MINA框架是一个专为小程序设计的框架,它主要分为两大部分:页面视图层(View)和AppService应用逻辑层。下面我将结合代码和图示来详细讲解MINA框架。
17 0
|
2月前
|
JavaScript Java 测试技术
基于SSM框架的童装购买平台微信小程序+vue.js附带文章和源代码设计说明文档ppt
基于SSM框架的童装购买平台微信小程序+vue.js附带文章和源代码设计说明文档ppt
24 1
|
2月前
|
小程序 JavaScript
在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
网上有的说是bind:after-read="afterRead"的命名问题不支持-,但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传,如果是多图上传的话file就是数组了
162 2
|
2月前
|
开发框架 移动开发 小程序
【微信小程序】-- 配置uni-app的开发环境(四十八)
【微信小程序】-- 配置uni-app的开发环境(四十八)
|
2月前
|
小程序 前端开发 JavaScript
微信小程序MINA框架
微信小程序MINA框架
248 0
|
2月前
|
小程序 数据可视化 前端开发
微信小程序开发入门教程-文本组件介绍
微信小程序开发入门教程-文本组件介绍
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的广西文化传承小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的广西文化传承小程序的详细设计和实现(源码+lw+部署文档+讲解等)
16 3
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物咖小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物咖小程序的详细设计和实现(源码+lw+部署文档+讲解等)
4 0
|
5天前
|
JSON 缓存 小程序
技术笔记:uniapp微信小程序支付
技术笔记:uniapp微信小程序支付