微信小程序入门&&配置文件

微信小程序入门

准备工作

​ 1.首先在微信公众平台注册小程序，完成注册后可以同步进行信息完善和开发

​ 2.开发工具的下载地址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3. 打开并使用微信扫码登录 ，创建一个项目（AppID代表小程序的ID号，必须拥有微信小程序账号才能申请这个ID号。如果没有AppID，小程序就不能在真机上演示，就是不能发布到线上给用户使用，只能在微信开发者工具里模拟运行。 ）

   

   创建完成后就会进入开发工具

   

微信开发者工具介绍

概览

工具栏

​ |普通编译：左边的模拟器只显示首页

​ 添加编译模式：可改变其他页面优先显示

​ |预览：点击会出现一个二维码 =>扫描可在手机上预览首页

​ |真机调试：出现一个二维码 => 可以调断点

​ |详情：在本地设置中可以根据需求勾选相关选项

最后一个 =>‘不校验…’:如果在微信应用程序加上异步请求代码，接口没有在白名单中添加过，则应用没有权限往外请求数据 => 勾选该选项可解决

结构目录

​ MINA => 原生框架

​ ⼩程序框架提供了⾃⼰的视图层描述语⾔WXML WXML 和 WXSS WXSS ，以及 JavaScript JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统（只需要关注数据）

小程序文件结构和传统web对比

传统web是三层结构；微信⼩程序是四层结构，多了⼀层配置 .json

基本的项目目录

sitemap.json文件 => 用来配置小程序及其页面是否允许被微信索引

配置⽂件

⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。全局的 app.json 和页面自己的的 page.json
*注意：配置文件中不能出现注释

全局配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab
​ 1. entryPagePath字段：指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数

2. pages字段: 用于描述当前⼩程序所有页面路径，这是为了让微信客户端知道当前你的⼩程序 页面定义在哪个⽬录。

3. window 字段: 定义小程序所有页面的顶部背景颜色，文字颜色定义，导航栏，标题等（HexColor => 十六进制颜色值，如"#ff00ff"）
   ​
   
   
   4.tabBar字段：客户端窗口的底部或顶部有 tab 栏可以切换页面，通过tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面
   
   |其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象

tabBar：{
    "list":[{
        "pagePath": //必填 页面路径，必须在 pages 中先定义
        "text": //必填 tab上按钮文字
        "iconPath":  //非必填 未选中时的图片路径，大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
        "selectedIconPath": // 非必填 选中时的图片路径 同上
    }]
}

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html <= 其他字段详情

//下面是创建的第一个项目中的app.json文件的内容
{
  	"entryPagePath": "pages/index/index"
    "pages":[
        "pages/index/index", //不要加后缀名
        "pages/logs/logs"  //可以在这里添加新页面
    ],  
    "window":{
        "backgroundTextStyle":"light",    
        "navigationBarBackgroundColor": "#fff",   
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"
    }
    "style": "v2",
  	"sitemapLocation": "sitemap.json"
}

页面配置 page.json

​ 对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项(只能设置 app.json 中 window 对应的配置项)

sitemap 配置

​ 用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引

​ |rule属性： 指定了索引规则，每项规则为一个JSON对象

​ | matching 取值说明

​ *exact：当小程序页面的参数列表等于 params 时，规则命中

​ *inclusive：当小程序页面的参数列表包含 params 时，规则命中

​ *exclusive：当小程序页面的参数列表与 params交集为空 时，规则命中

​ *partial：当小程序页面的参数列表等于 params 交集不为空时，规则命中

{
  "rules":[{
    "action": "allow",
    "page": "path/to/page",
    "params": ["a", "b"],
    "matching": "exact"
  }, {
    "action": "disallow",
    "page": "path/to/page"
  }]
}
//path/to/page?a=1&b=2 => 优先索引
//path/to/page?a=1&b=2&c=3 => 优先索引
//path/to/page => 不被索引
//path/to/page?a=1 => 不被索引
//其他页面都会被索引