1.首先在微信公众平台注册小程序,完成注册后可以同步进行信息完善和开发
2.开发工具的下载地址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
打开并使用微信扫码登录 ,创建一个项目(AppID代表小程序的ID号,必须拥有微信小程序账号才能申请这个ID号。如果没有AppID,小程序就不能在真机上演示,就是不能发布到线上给用户使用,只能在微信开发者工具里模拟运行。 )
创建完成后就会进入开发工具
|普通编译:左边的模拟器只显示首页
添加编译模式:可改变其他页面优先显示
|预览:点击会出现一个二维码 =>扫描可在手机上预览首页
|真机调试:出现一个二维码 => 可以调断点
|详情:在本地设置中可以根据需求勾选相关选项
最后一个 =>‘不校验…’:如果在微信应用程序加上异步请求代码,接口没有在白名单中添加过,则应用没有权限往外请求数据 => 勾选该选项可解决
MINA => 原生框架
⼩程序框架提供了⾃⼰的视图层描述语⾔WXML WXML 和 WXSS WXSS ,以及 JavaScript JavaScript ,并在视图层与逻辑层间提供了数据传输和事件系统(只需要关注数据)
传统web是三层结构;微信⼩程序是四层结构,多了⼀层配置 .json
sitemap.json文件 => 用来配置小程序及其页面是否允许被微信索引
⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。全局的 app.json 和页面自己的的 page.json
*注意:配置文件中不能出现注释
app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab
1. entryPagePath字段:指定小程序的默认启动路径(首页),常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填,将默认为 pages 列表的第一项。不支持带页面路径参数
pages字段: 用于描述当前⼩程序所有页面路径,这是为了让微信客户端知道当前你的⼩程序 页面定义在哪个⽬录。
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"
}
对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json
的 window
中相同的配置项(只能设置 app.json
中 window
对应的配置项)
用于配置小程序及其页面是否允许被微信索引,文件内容为一个 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 => 不被索引
//其他页面都会被索引