微信小程序

发表于 更新于 分类于 阅读次数：

…

规范

设计规范

友好：页面应该重点突出，流程明确。
清洗：导航明确，减少等待，异常可控。
便捷：减少输入（使用其他IO），避免误操作，操作流程。
同一：视觉统一。

运营规范

账号信息：描述（主要，用户搜索根据）
服务类目：类目与内容一致（体验良好）
功能：完整，无搜索推荐，不互推
内容：禁止诱导，不可营销与广告为主，禁止测试类，游戏（有专门的微信小游戏）
数据：获取用户数据需告知

小程序官网
开发文档
开发者社区

开发

从微信开发者页面下复制AppID到开发工具中，并取消使用快速模板。

此时项目中只有project.config.json文件，需要创建app.json文件，用作启动文件。

文件结构

一个小程序分为一个APP和多个Page。App又分为逻辑，公共配置，公共样式表三个文件（app.js, app.json, app.wxss），每Page分为逻辑，结构，样式表，配置（js, wxml, wxss, json）。

渲染层 Webview
逻辑层 JsCore
微信客户端 Native：负责网络接口

因此项目结构为

  • project.config.json
  • app.js
  • app.json
  • app.wxss
  • images
  • pages
    • about
      • about.js
      • about.wxml
      • about.wxss
      • about.json

APP入口 app.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
    // 每个页面的访问路径，相对路径
    // 第一个页面为初始页面
    "pages": ["pages/about/about"],
    // 对若干一级页面的入口链接
    "tabBar": {
        "list": [
            {
                "text": "Page 1",
                "pagePath": "",
                "iconPath": "",
                "selectedIconPath": "",
            }
        ],
        "color": "#FFFFFF", // 文本颜色
        "selectedColor": "#000000"
    },
    "window": {
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "Default Title"
    }
}

页面逻辑 about.js

1
2
// 注册页面对象
Page({})

页面配置 about.json

1
2
3
4
5
{
    "navigationBarTitleText": "About",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
}

页面结构 about.wxml

1
<text class="info">Hello</text>

页面样式 about.wxss

1
2
3
4
.info {
    font-weight: bold;
    font-size: 30px;
}

组件

通用属性：
class, id, style, bindtap, hidden, data-*

View

页框。
作用同div。

Image

图像。
属性：
src: 可以用绝对或相对路径

Text

文本。

导航。可以实现跳转。不可被text包含。默认为块级元素。
属性：
url：目标页可用绝对路径
open-type：redirect，重定向；默认navigate，可返回；switchTab，一级页面切换
hover-class：按住效果

布局

传统方法

1
2
3
4
5
6
7
8
9
10
11
.container {
    /* vh表示 100%视口高度 */
    height: 100vh; 
    text-align: center;
}
text {
    display: block;
}
image, text {
    margin-bottom: 60px;
}

弹性盒子布局

从上往下：

1
2
3
4
5
6
7
8
9
10
11
.container{
    height: 100vh;
    /* 弹性盒子 */
    display: flex;
    /* 列方式 */
    flex-direction: column;
    /* 均匀间隔 */
    justify-content: space-around;
    /* 居中 */
    align-items: center;
}

响应式单位

1
2
3
4
5
6
7
8
9
.about-banner{
    /* 750rpx 所有设备的宽度规定 */
    width: 375rpx;
    height: 375rpx;
    border-radius: 50%;
}
text{
    font-size: 30rpx;
}

数据绑定

各个层次（渲染，逻辑等）有不同的进程，之间通过数据绑定和事件机制通信。

在页面对象中可以定义数据：

1
2
3
4
5
6
7
8
9
// 要绑定的数据
Page({
    data: {
        name: "",
        comment: "",
        imagePath: "",
    },
    count: 100
})

绑定数据到前端。

1
<text>{{count}}</text>

条件渲染

1
2
3
4
重新渲染
<text wx:if="{{x}}">
只控制可见性
<text hidden="{{!x}}">

列表渲染

1
2
3
4
<view wx:for="{{x_list}}">
{{index}}
{{item.name}}
</view>

轮播

1
2
3
4
5
6
7
8
9
10
11
是否显示底部指示器
是否显示前一页和后一页的一小部分
<swiper 
    indicator-dots="{{true}}"
    previous-margin="50rpx"  
    next-margin="50rpx"
>
    <swiper-item>
        <text>123</text>
    </swiper-item>
</swiper>

生命周期