WePY框架学习系列1——使用WePY创建微信小程序

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）

此时小程序里的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