vue项目稍后再GitHub上进行更新，现在一起来学习小程序！！
一、微信小程序
1.微信公众平台
网址： https://mp.weixin.qq.com
1.介绍
微信公众平台，简称公众号，是开发者通过公众号为用户提供咨询和服务的平台
2.账号分类
(1)订阅号
订阅号：为媒体和个人提供一种新的信息传播方式，主要功能是在微信侧给用户传达资讯；（功能类似报纸杂志，提供新闻信息或娱乐趣事）
适用人群：个人、媒体、企业、政府或其他组织。
群发次数：订阅号（认证用户、非认证用户）1天内可群发1条消息。
订阅号所在位置： 微信好友对话列表中的订阅号文件夹中，统一管理
欢迎大家关注订阅号：烟雨阁楼
(2)服务号
注意： 不支持个人开发
服务号：为企业和组织提供更强大的业务服务与用户管理能力，主要偏向服务类交互（功能类似12315，114，银行，提供绑定信息，服务交互的）；
适用人群：媒体、企业、政府或其他组织。
群发次数：服务号1个月（按自然月）内可发送4条群发消息。
(3)企业微信
参考：钉钉
为企业与组织提供专业的协作、管理和客户运营工具。企业员工可以用认证的身份添加客户微信，提供服务，实现交易。实现对内工作协同高效，对外连接12亿微信用户。
(4)微信小程序
小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
类似app一样的产品，嵌入微信内部的。伪app。
2.小程序优缺点
1.优点
（1）不需要下载，即可使用，即用即走
（2）上手容易，门槛较低
(3) 流量较高
2.缺点
(1)代码包大小，有限制 ，一个包最大不能超过2M， 分包 （16M）
(2)对个人开发者限制较大
(3)审核限制较大，不能做到及时发布
(4)不支持直接分享朋友圈（android支持 bate版本）
3.开发流程
注册 – 信息完善 – 开发 – 提交审核
3.1注册
进入后台--立即注册--选择账号类型（小程序）--使用邮箱注册，填写密码--进入自己的邮箱进行点击链接进行激活--
信息登记【个人-企业-政府-媒体-其他组织】
填写个人信息： 姓名-身份证号-手机号-微信扫码
3.2填写基本信息
1.名字、简称、头像、介绍，个人账号不能认证
2.服务类目 ***
小程序的账号的种类
选择-- 餐饮--菜谱
第一次进入小程序后台，服务类目千万不要选择游戏
3.3管理
1.版本管理
开发版本：
小程序测试完毕，点击微信开发者工具上传按钮，生成的版本
审核版本：
点击开发版本后面的提交审核按钮，生成的版本，次本版就是微信团队正在审核的版本
线上版本：
当审核版本通过审核之后，点击提交发布生成的版本，此版本是现在微信客户端访问的版本
体验版本：
相当于测试版本，上线之前进行检查体验，点击开发版本后面的选为体验版本
2.成员管理
管理员:
小程序拥有者
项目成员：
协同开发和管理小程序的
体验成员：
专门体验-体验版本小程序的开发人员
3.4开发设置
1.appid/秘钥（保存好）
小程序的唯一标识
2.服务器域名
vue开发：
前端axios请求地址（接口地址），解决跨域，建议使用后端解决跨域问题
小程序：
不存在跨域问题
必须使用https请求，把服务器地址，存在在开发设置，服务器设置
4.微信开发者工具
4.1下载
开发文档--工具--下载--稳定版下载--安装即可
4.2项目创建
1.创建空的文件夹，选择路径
2.填写appid（可使用真实的或者测试的）
3.暂时不使用云开发
4.选择js
测试号与真实appid的区别：
(1)云开发测试账号不能使用
(2)测试账号不能发布上传代码
4.3工具使用
1.工具介绍
菜单栏、工具栏、模拟器、目录数据、编辑器、调试器
注意：
在工具栏详情设置中，可以先把不检验合法域名勾选上
5.目录结构
pages
index
index.js
index.json
index.wxml
index.wxss
logs
logs.js
logs.json
logs.wxml
logs.wxss
unitl
utils.js
app.js
app.json
app.wxss
project.config.json
sitemap.json
1.目录结构
(1)主体文件
三个文件名称不能改变，不能大写
app.js
注册小程序，入口文件
app.json
全局的配置文件
app.wxss
全局的样式文件
(2)页面文件
每一个页面都有四个文件
js、wxss、wxml、json
js： 当前页面的逻辑文件
wxss： 页面的样式文件 相当于css
json： 页面的配置
wxml： 页面的结构 ，相当于html
2.系统生成的目录
pages： 页面的目录 (能够更改)
utils： 工具模块
project.config.json: 当前项目对当前编辑器的配置文件
sitemap.json 站点地图，配置文件
比如index cart detail
6.自定义目录结构
1.不能缺少app.json ,手动创建
app.json 没有被找到
2.app.json 文件内容报错
[ app.json.json 文件错误] app.json: Empty file is NOT a valid json file
解决办法;
创建对象
3.pages不能为空
[ app.json 文件内容错误] app.json: pages 不能为空
pages是路径列表--对比于vue中路由
{
"pages": [
"a"
]
}
4.需要创建页面
（1）直接在pages字段上进行设置
（2）先去创建文件夹，右键选择新建page
5.最后，把appjs进行创建即可
7.app.json全局配置文件 ***
7.1 entryPagePath
"entryPagePath": "pages/index/index",
7.2pages
注意事项：
（1）未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。
（2）小程序中新增/减少页面，都需要对 pages 数组进行修改。
（3）每一项是以逗号分隔，但是最后一项不能加逗号
（4) json配置文件中，不能加注释
（5）不能使用单引号，必须使用双引号
（6）pages中的元素，页面路径前面不能加任何的字符
7.3window设置
(1)navigationBar设置 顶部导航
"window":{
"navigationStyle": "default",
"navigationBarBackgroundColor": "#f00",
"navigationBarTitleText": "web济南",
"navigationBarTextStyle": "black"
},
(2)background 下拉之后产生的背景
"enablePullDownRefresh": true, // 开启下拉操作
"backgroundColor": "#123456",
"backgroundTextStyle": "light"
7.4style
"style": "v2",//新版组件样式
v2版本button默认display: block;要设置宽高可更改为display: inline-block;背景色可正常设置。
7.5tabbar
注意事项：
1.list是tab的列表，最多是5个，最少是2个，icon图片不支持网络图片，大小限制40kb，尺寸是81 * 81
2.当position 为top时候，不显示icon
3.list中的pagepath路径，一定是在pages字段中提前定义好
list：tab的列表选项
"list":[
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "tabs/index.png",
"selectedIconPath": "tabs/indexFull.png"
},
{
"text": "购物车",
"pagePath": "pages/cart/cart",
"iconPath": "./tabs/cart.png",
"selectedIconPath": "./tabs/cartFull.png"
},
{
"text": "我的",
"pagePath": "pages/my/my",
"iconPath": "./tabs/my.png",
"selectedIconPath": "./tabs/myFull.png"
}
]
tab的其他配置选项：
"tabbar":{
"color": "#000",
"selectedColor": "#f00",
"backgroundColor":"#123456",
"borderStyle": "white",
"position": "bottom",
"custom": false,
}
8.页面的配置文件
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象
{
"usingComponents": {},
"navigationBarTitleText":"首页",
"enablePullDownRefresh": true,
"disableScroll":true
}
9.sitemap.json
小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引；
1.pages/index/index 第一次
2.params
"params":["id",'name'],
pages/index/index?id=XXX&name=XXX
3.代码是从上到下依次去匹配
但是priority来改变规则匹配的优先级
{
"rules": [
{
"action": "allow",
"params": ["id","name"], // 路径需要的参数
"matching": "inclusive", // 匹配的形式，传递的参数包含 params中的参数即可命中
"matching": "exact", // 传递的参数和params中需要的参数完全匹配，即可命中
"matching": "exclusive", // 传递的参数与 params中的参数交集为空，即可命中
"matching": "partial", // 传递的参数与 params中的参数交集不为空，即可命中
"page": "pages/index/index"
},
{
"action": "disallow",
"page": "*"
}
]
}
{
"rules": [
{
"action": "disallow",
"params": ["id","name"],
"matching": "inclusive",
"page":"pages/index/index"
},
{
"action": "allow",
"params": ["id","name"],
"matching": "inclusive",
"page": "pages/index/index",
"priority":2 // 规则匹配的优先级，值越大，越先进行匹配
},
{
"action": "disallow",
"page": "*"
}
]
}
10.场景值
10.1.场景值的概念
用户如何进入当前小程序的，即进入小程序的途径
10.2应用场景
kfc：
麦当劳：
正常点餐系统和外卖系统的区别
10.3应用
onLaunch(option){
// 获取场景值
console.log(option)
if(option.scene == 1011){
console.log('扫描二维码进入的')
}else if(option.scene == 1001){
console.log('发现栏主入口栏进入的')
}else{
console.log('其他形式进入的')
}
}
onShow(option){
if(option.scene == 1011){
console.log('扫描二维码进入的')
}else if(option.scene == 1001){
console.log('发现栏主入口栏进入的')
}else{
console.log('其他形式进入的')
}
}
扫一扫
726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
