# mini-program

**Repository Path**: ouyangzhigang/mini-program

## Basic Information

- **Project Name**: mini-program
- **Description**: 小程序项目构建
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2018-12-13
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# weixin-activity

> 微信小程序活动相關页面

**Deprecated!**

请查看最新分支: develop

> 官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/

> Vant文档：https://youzan.github.io/vant/#/zh-CN/intro

## 项目结构

```
├── README.md                   // README.md
│── source                      // 静态资源   
│ 
├── model                       // 数据模型
│   ├── index.model.js          // index数据模板
│   └── ...
├── constant                    // 常量文件配置信息
│   └──inde.constant.js         // 首页常量配置
├── template                    // 全局可复用模板
│   ├── ranking-list
├── ├──├── ranking-list.wxml & ranking-list.wxss
│   └── ...
├── wxcomponent                 // components
│   ├── vant-weapp              // 第三方UI库 vant-weapp & 自定义组件
│   └── ...
├── pages                       // 业务页面
│   ├── index                   // 首页
│   ├── log                     // log
│   └── ...
├── utils                       // 公共工具包
│   ├── util.js
│   └── ...
├── app.js                      // 小程序全局实例
├── app.json                    // 是当前小程序的全局配置
├── app.wxss                    // 小程序全局样式
└── project.config.json         // 小程序配置文件
```

## 使用步骤

1. 将仓库克隆到本地：

  ```bash
  $ git clone git@v.src.corp.qihoo.net:360jr-fe/weixin-activity.git
  $ cd weixin-activity
  ```

2. 打开`微信Web开放者工具`（注意：必须是`1.02.1811141`版本）

  - 必须是`1.02.1811141`版本，之前的版本不能保证正常运行
  - 不需要所谓的破解，网上所谓的破解只是针对之前的`1.02.1811141`版本，新的官方版本不需要破解，不需要破解，不需要破解！
  - 下载链接（官方版本，放心下载）：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
    * `wechat_web_devtools_1.02.1811141_x64.exe`（Windows 64位）
    * `wechat_web_devtools_1.02.1811141_ia32.exe`（Windows 32位）
    * `wechat_web_devtools_1.02.1811141.dmg`（macOS）

3. 选择`添加项目`，填写或选择相应信息

  - AppID：点击右下角`无AppID`
  - 项目名称：随便填写，因为不涉及到部署，所以无所谓
  - 项目目录：选择刚刚克隆的文件夹
  - 点击`添加项目`

### 创建一个项目文件夹，创建基本所需文件

#### app.js

项目主入口文件（用于创建应用程序对象）

```javascript
// App函数是一个全局函数，用于创建应用程序对象
App({
  // ========== 全局数据对象（整个应用程序共享） ==========
  globalData: { ... },

  // ========== 应用程序全局方法 ==========
  method1 (p1, p2) { ... },
  method2 (p1, p2) { ... },

  // ========== 生命周期方法 ==========
  // 应用程序启动时触发一次
  onLaunch () { ... },

  // 当应用程序进入前台显示状态时触发
  onShow () { ... },

  // 当应用程序进入后台状态时触发
  onHide () { ... }
})

```

#### app.json

项目配置声明文件（指定项目的一些信息，比如导航栏样式颜色等等）

```javascript
{
  // 当前程序是由哪些页面组成的（第一项默认为初始页面）
  // 所有使用到的组件或页面都必须在此体现
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
  "pages": [ ... ],
  // 应用程序窗口设置
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
  "window": { ... },
  // 应用导航栏设置
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
  "tabBar": { ... },
  // 网络超时设置
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
  "networkTimeout": {},
  // 是否在控制台输出调试信息
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
  "debug": true
}
```

#### app.wxss

[!可选!]项目全局的样式文件，内容遵循CSS标准语法


### 创建页面组件

每个页面组件也分为四个文件组成：

- page-name.js

  * 页面逻辑文件，用于处理页面生命周期控制和数据处理
  * 未完待续...

- page-name.json

 * 设置当前页面工作时的一些配置
 * 此处可以覆盖app.json中的window设置
 * 也就是说只可以设置window中设置的熟悉
 * 未完待续...

- page-name.wxml

  * wxml指的是`Wei Xin Markup Language`
  * 用于定义页面中元素结构的
  * 语法遵循XML语法，注意是XML语法，不是HTML语法，不是HTML语法，不是HTML语法
  * 未完待续...

- page-name.wxss

  * wxml指的是`Wei Xin Style Sheet`
  * 用于定义页面样式的
  * 语法遵循CSS语法，扩展了CSS基本用法和长度单位（主要就是rpx响应式像素）