WePY框架学习系列1——使用WePY创建微信小程序
- 本文档用于记录Vanellope在尝试使用WePY框架的构造过程
- 构建了一个HelloWord的来学习使用WePY
从官网下载Node.js安装好,能够正常使用npm命令行
Node.js v12.16.2 to /usr/local/bin/node
npm v6.14.4 to /usr/local/bin/npm
Make sure that /usr/local/bin is in your $PATH.
1. npm安装框架
# 为了避免Permission denied, 出现“The operation was rejected by your operating system.”,使用管理员身份安装
# 如果速度太慢记得挂代理或者换国内源
sudo npm install wepy-cli -g
创建一个项目
export http_proxy="http://127.0.0.1:8001";
export HTTP_PROXY="http://127.0.0.1:8001";
export https_proxy="http://127.0.0.1:8001";
export HTTPS_PROXY="http://127.0.0.1:8001"
wepy init standard HelloWePY
因为某种抽风的原因,在终端加入代理(上面这个代理是我的,请根据你自己的代理情况export)
![image-20200427221446550](https://tva1.sinaimg.cn/large/007S8ZIlly1ge8onpv9spj30f00n6tj1.jpg)
此时小程序里的project.config.json
文件内容如下图所示
{
"description": "My first wepy project using calendar app id",
"setting": {
"urlCheck": true,
"es6": false,
"postcss": false,
"minified": false
},
"compileType": "miniprogram",
"appid": "小程序ID脱敏处理",
"projectname": "hellowepy",
"miniprogramRoot": "./dist"
}
安装项目依赖
此时项目只有一个框架,是无法编译的,使用npm install
来安装项目依赖
若出现报错:
saveError ENOENT: no such file or directory, open '/Users/xxx/package.json'
是系统没有‘package.json’这个文件导致。这个文件的作用就是管理你本地安装的npm包。
则在/Users/xxx/(也就是你的用户目录)输入以下命令:
npm init -y
然后进到我们创建的项目名称(上面是HelloWePY)的目录里执行npm install
即可
2. 开启自动编译
使用以下命令来启动开发时监控代码改动自动构建的功能。
--watch
参数注意前面有两个短斜杠,一旦代码有改动,项目会重新构建
wepy build --watch
此时在HelloWePY的目录下已经可以看见dist文件夹了。
在后续的开发中我们只需要写.wpy
文件(一个页面对应一个.wpy
,微信开发者工具是打不开这个格式的,推荐使用Webstorm或者VScode来编辑,语法高亮可以直接采用vue的高亮规则,PS:VS code 支持wpy文件的插件 - Vetur-wepy);
然后使用微信开发者工具打开dist目录可以看的是原生小程序的形式,即每个页面文件都包含.js, .json, .wxml, .wxss
这几个文件。
3. 尝试添加一个新的hello页面
在app.wpy
中声明如下:
// 添加一个页面路径'pages/hello'
config = {
pages: [
'pages/index',
'pages/hello'
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
然后在项目的src/pages
目录下创建一个hello.wpy
文件,内容为:
<style lang="less">
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
</style>
<template>
<view style="text-align: center">
<text>{{wordData}}</text>
</view>
</template>
<script>
// 页面逻辑代码部分
import wepy from 'wepy'
export default class HelloWorld extends wepy.page {
data = {
wordData: 'Welcome Vanellope !'
}
}
</script>
其中
<style>
之间的部分编译过后会在dist/pages
中形成hello.wxss
<template>
之间的部分编译过后会在dist/pages
中形成hello.wxml
<script>
编译过后会在dist/pages
中形成hello.js
若报错某页面has not been registered yet,删除dist文件夹重新构造一遍,命令:
npm run dev
现在在微信开发者工具的编译功能查看该Hello页面,单击“普通编译”下拉菜单,选择“添加编译模式”,启动页面选择为刚才添加的pages/hello