目录
认识
什么是微信小程序?
简称小程序,是一种不需要下载安装即可使用的应用,可以实现原生app可以实现的效果和功能,能替代一些简单的app应用。
小程序优势:
1.不用安装,省流量,省时间,不占用桌面
2.与原生APP相比综合考虑更优
3.微信用户多,粘性高,
4.易小规模试错,快速迭代,跨平台
5.对拥有者更易推广,省成本。
6.具有线下连接一切使命,(2014年11月马化腾在「世界互联网大会」上提出腾讯要「连接一切」,要成为互联网连接器)
微信小程序拥有自己的标签和HTML5有一定却别,
相关网站:
1.微信公众号平台 :微信公众平台微信公众平台,给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。https://mp.weixin.qq.com/
注册登录的网站,获取AppID和AppSecret,配置服务器域名
2.微信小程序文档:微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/
开发者必用,学习微信小程序
3.微信开放平台:微信开放平台https://open.weixin.qq.com/
绑定小程序,获取UnionID
登录创建小程序项目,App ID为注册后-->开发管理--->开发者设置里的编号,实验阶段打开详情--->本地设置--->不校验合法域名。
目录结构
小程序包含一个描述整体程序的app和多个描述各自页面的page。
一个小程序主体分为三个文件组成,必须放在项目的根目录下。app.js(小程序逻辑),app.json(小程序公共配置),app.wxss(小程序公共样式表)。
一个小程序页面由四个文件组成,js(页面逻辑),wxml(页面结构),json(页面配置),wxss(页面样式表),同时这四个文件必须有相同的路径和文件名。
utils可删但对应的logs也需删除因logs引用了utils.
代码构成:
json配置:
JSON 是一种数据格式,并不是编程语言,在小程序中,JSON指的是静态配置。
(1)app.json全局配置:包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
{
"entryPagePath":"pages/goods/goods", //默认启动首页,写了此项pages里第一项不起作用
//定义小程序页面
"pages":[
//第一位方便调试
//在此直接创建文件且模拟器默认显示(启动项),微信小程序所以可点路径都需在此配置添加
"pages/ / " ,
"pages/goods/goods"
"pages/index/index",
"pages/logs/index",
],
//定义全部页面顶部背景颜色,文字颜色等
"window":{
"backgroundTextStyle":"light", //下拉loading样式,仅支持dark /light
"navigationBarBackgroundColor": "#fff", //导航栏背景颜色
"navigationBarTitleText": "Weixin", //导航栏标题文字内容
"navigationBarTextStyle":"black" //导航栏标题颜色,仅支持black/white
},
//定义tabBar 底部导航
"tabBar": {
"color": "#000",
"selectedColor": "#000",
"backgroundColor": "#f5f5f5",
//list每个导航的每一项,一项为一个数组,必须两项
"list": [{
//页面路径,必须上面pages定义过的
"pagePath":"pages/index/index",
"text": "个人", //文本
"iconPath": "./img/个人.png", //图标地址本地的,未选中
"selectedIconPath": "./img/个人.png" //选中
},{
"pagePath": "pages/goods/goods",
"text": "商品",
"iconPath": "./img/礼物.png",
"selectedIconPath": "./img/购物车空 (1).png"
}]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
page字段: 用于描述当前小程序所有页面路径,为了让微信客户端直到当前你的小程序页面定义在哪个目录。每新增一个页面都需要在page定义。
window字段: 定义小程序所有页面的顶部背景颜色,文字颜色定义等。
eg:
(2)page.json页面配置:表示page文件夹下的page/index中的index.json,小程序各个页面的配置。页面中配置项会覆盖app.json中相同配置项。与全局相比无tabBar和pages
(3)json语法:JSON文件都是被包裹在一个大括号中 {},通过key-value(键值对)的方式来表达数据。JSON的Key必须包裹在一个双引号中。
JSON的值只能是以下几种数据格式,其他任何格式都会触发报错。 JSON 文件中无法使用注释,试图添加注释将会引发报错。
-
数字,包含浮点数和整数
-
字符串,需要包裹在双引号中
-
Bool值,true 或者 false
-
数组,需要包裹在方括号中 []
-
对象,需要包裹在大括号中 {}
-
Null
wxml模板:
直接看官方文档
相当于HTML,但使用标签不同,微信小程序有自己的标签。
大小写敏感,
容器组件view :块级元素,独占一行,宽高可设----->div相似
hover-class:指定按下去的样式类。
文本组件text:行内元素------>span似
可视滚动区域scroll-view :scroll-y开启竖向滚动,scroll-x开启横向滚动,超过时。
需结合CSS使用设置宽高。
轮播图swiper:只可放置swiper-item组件,swiper-item里可放任何组件。
通过属性设置:indicator-dots显示指示点,indicator-color="red "指示点颜色,indicator-active-color="blue "当前选中的指示点颜色,autoplay自动切换,
图标组件icon :属性设置type = " success" size = " 50px" color = " " 成功
进度条 progress :percent="50"
button按钮,checkbox复选框 form表单……
WXSS样式:
有行内样式,外联样式,第三方样式库,与CSS类似
(1)app.wxss:全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
(2)page.wxss:作用于当前页面。
新增了尺寸单位rpx。
单位: rpx
750rpx == 100vw
375px == 100vw
res:事件对象