微信小程序 -- (1)文档说明、配置项

微信小程序

1. 介绍

• 微信公众平台由腾讯提供，基于腾讯微信的服务器，为广大企业、组织、个人提供用户管理或咨询服务的平台。微信公众平台提供了3种账号类型：

服务号、订阅号、小程序

• 服务号：
  -类似：中国移动。为企业或组织提供的的进行用户管理和服务的账号，侧重于服务。
• 订阅号： 类似：CSDN。为企业或组织或个人提供的进行资讯分享的账号，侧重于资讯分享。
• 小程序： 为企业、组织、个人提供的可以达到原生APP相同功能的应用。（微信内部运行）。其优点在于免下载，用完就走。

2. 小程序接入流程

微信公众平台首页

创建第一个小程序项目

AppID(小程序ID): 开发 ==> 开发管理

• 安装微信开发者工具IDE
• 管理员微信扫码登录

3. 文件结构

3.1 小程序项目的文件和文件夹

• 使用小程序开发工具新建的项目根目录包含以下文件夹以文件

1. pages（文件夹）：
   ① 页面index。（页面文件夹下：index.js（js）
   ② index.json(配置)
   ③ index.wxml （html）
   ④ index.wxss（css））
2. utils（文件夹）
3. app.js
4. app.wxss
5. project.config.json
6. sitemap.json

3.2 小程序包中包含的文件类型

1. json文件 配置文件

• app.json: 全局配置文件。 全局生效
• project.config.json 小程序项目的配置文件
• pages.json 单页面配置文件 (每个页面都会有一个*.json)

2.wxml文件 定义页面模板

• 类似于html 不能用任何html标签

3. wxss文件 定义页面样式

• app.wxss 用于定义全局样式。全局生效
• page.wxss 定义单页面中的组件样式

4. js 文件 定义页面脚本文件

• app.js 定义小程序的入口脚本文件。该文件只会在启动小程序时执行一次。
• page.js 定义小程序的单页面脚本文件。 的

4. 配置项

配置项

page.json配置项

app.json参考文档

• app.json用于对小程序进行全局配置，文件内配置需要使用json语法
• 注意

1. json文件中无法写注释
2. 字符串必须在双引号之间。Json对象的属性名也必须在双引号号之间
3. 数组或对象最后一个不能加逗号
4. json中不存在undefined数据类型

pages配置项

• pages配置项用于指定当前小程序中包含哪些页面（定义路由界面）
• pages下的第一个 会默认为首页。

"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/test/test"
  ],

• 新建配置项”pages/test/test”将会在pages目录下新增test目录，然后在其中新建四个文件test.js test.json test.wxml test.wxss 四个文件

window配置项

window配置项参考网站

• window配置项用于设置小程序导航栏、标题、窗口背景的内容与样式。object类型

"window":{
"backgroundTextStyle":"light",       //背景文本样式
"backgroundColor": "#ccc",        //背景颜色
"enablePullDownRefresh": true,     //下拉刷新开启

    "navigationBarBackgroundColor": "#fff",    //导航背景色
    "navigationBarTitleText": "Weixin",        //导航文本内容
    "navigationBarTextStyle":"black"         //导航文本样式
  }

tabbar配置项

• tabbar属性用于配置小程序的底部选项卡，object类型
• 页面对象内容在内存中 不销毁

实现步骤

1. 准备好底部选项卡所需要的3个页面 在pages配置
2. 配置tabbar配置项，指定底部选项卡的文本默认颜色，选中项文本颜色，还要指定每个选项卡中的文本内容、页面路径、图片路径、选中的图片路径等参数

"tabBar": {
    "color": "#333",
    "selectedColor": "#f00",
    "list": [{
      "pagePath": "pages/index/index",
       "text":"影院",
       "iconPath": "/images/index_disable.png",
       "selectedIconPath": "/images/index_enable.png"
    },
    {
      "pagePath": "pages/theatre/theatre",
       "text":"影院",
       "iconPath": "/images/theatre_disable.png",
       "selectedIconPath": "/images/theatre_enable.png"
    },
    {
      "pagePath": "pages/me/me",
       "text":"影院",
       "iconPath": "/images/me_disable.png",
       "selectedIconPath": "/images/me_enable.png"
    }
  ]
  },

注意事项

1. 如果position设置为顶部选项卡，无法显示图标
2. List中至少包含2个选项卡，最多包含5个选项卡
3. Pagepath不能以/开头
4. iconPath与selectedIconPath不能用网络路径
5. 图标尺寸建议81*81，每张图片不能超过40k

style配置项

• 微信客户端 7.0 开始，UI 界面进行了大改版。小程序也进行了基础组件的样式升级。app.json 中配置 "style": "v2"可表明启用新版的组件样式。
• 本次改动涉及的组件有 button icon radio checkbox switch slider。可前往小程序示例进行体验。

sitemapLocation配置项

• sitemapLocation属性用于指定sitemap.json配置文件的位置。

sitemap.json

参考官网

• 开发者可以通过sitemap.json配置，或者管理后台 配置小程序及其页面是否允许被微信索引

"rules": [{
    "action": "disallow",
    "page": "pages/me/me"
  },{
  "action": "allow",
  "page": "*"
  }]

sitemap的索引提示默认是开启的，如果需要关闭它，可以修改小程序根目录下的project.config.json中的setting配置字段：”checkSiteMap”:false

5. 页面文档

app.wxss

用于定义组件的全局样式

app.js

• app.js是小程序全局的初始化启动脚本。
• 当小程序第一次启动时，将会执行一次app.js里面的代码，对App对象进行初始化，注册应用相关的生命周期方法，声明并初始化全局数据等。
• app.js在应用的生命周期过程中仅执行一次。

App(
  onLaunch(){    //生命周期方法，启动就会运行一次 
}
);

wxss

• wxss是小程序提供的一套样式语言，小程序打包编译时会对该文件的内容重新编译。它具备了css的大部分特性。并且对css进行了扩展，新增了rpx作为响应式尺寸单位。

6. rpx像素单位

• 使用rpx作为尺寸单位来定义组件的宽高,可以更具屏幕的分辨率对图片的宽、高进行自适应。rpx在不同的手机屏幕上将会装成不同的px值。依照的规则是:
  无论任何屏幕，宽度永远都是750rpx。
  屏幕宽750px ==> 1px=1rpx
屏幕宽375px==> 1px = 2rpx
• 若图片宽度设置为375px,则该图片无论在任何设备下宽度都会占用屏幕的一半。并且高度也可以使用rpx来进行定义。