微信小程序开发-基础
1.小程序环境搭建
账号注册
百度搜索 “微信公众平台”
官网地址： https://mp.weixin.qq.com/
微信公众平台小程序注册地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN
注册时主体类型选择
注意：注册小程序使用的邮箱账号不能和订阅号或者服务号的重复，也就是假如该邮箱账号注册过订阅号或者服务号，就不能用来注册小程序账号了，推荐注册一个新的邮箱账号，
2.创建小程序
1.下载开发工具
开发工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2.获取appid
小程序的appid相当于小程序平台的一个身份证，很多地方需要用到appid，比如在创建小程序项目时候就需要用到appid
1.登录微信公众开发平台（地址见账号注册）
2.进入设置
3.切换到开发设置
3.创建第一个小程序项目
打开微信开发者工具，根据下面提示填写项目信息
点击右下角的确定按钮，创建项目成功
总结：
1. 账号注册，推荐使用新注册的邮箱，可以是163邮箱、新浪邮箱、qq邮箱等等
2. 个人开发者，注册时第三选择账号主体要选择个人
3. 获取appid，登录微信公众平台，选择左侧栏的设置，在右侧内容页切换到开发设置
4. 创建项目时需要输入上一步获取的appid
5. 选择启动模板： 选择快速启动模板
3.开发工具功能介绍
1.新增和修改编译模式
编译模式可以修改启动页和添加该页面的参数，新增界面如下图：
点击确定按钮，页面就会刷新并显示为当前设置的启动页
2.预览和真机调试
调试：开发者可以通过手机扫描预览提供的二维码来访问小程序
真机调试：和预览一样会提供访问的二维码，不同的是真机调试模式会弹出控制台，可以查看手机模式下的调试信息
3.清除缓存
清除本地的授权记录、sessionStorage和localStorage等缓存数据
4.项目的详情设置
通过顶部的菜单栏，选择 - 设置 - 项目设置，点击后有右侧打开项目设置面板
注意版本库的选择，不要轻易去修改这个配置，
很容易导致项目的api不兼容
4.小程序文件结构
1.基本的结构
- pages // 包含了所有页面
- index // 页面文件夹
- index.js // 页面的脚本逻辑文件
- index.wxml // 页面模板文件
- index.wxss // 页面样式文件
- index.json // 页面配置文件
- utils // 普通的工具函数
- app.js // 项目启动入口
- app.json // 全局的配置
- app.wxss // 全局样式
- project.config.json // 项目的配置文件
和web的页面结构比较：
| 文件 | 小程序 | web |
|---|---|---|
| 模板 | .wxml | .html |
| 样式 | .wxss | .css |
| 脚本 | .js | .js/script标签 |
注意：微信小程序页面目录下，.js 和 .wxml 文件是必需的
2.全局配置 app.json
app.json文件用来对微信小程序进行全局配置
常见的属性：
| 属性 | 类型 | 必填 | 描述 | 详细配置地址 |
|---|---|---|---|---|
| pages | String | 是 | 页面路径列表 | https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#pages |
| window | Object | 否 | 全局的窗口样式 | https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#window |
| tabBar | Object | 否 | 底部tab栏的配置 | https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#tabBar |
局部配置
pages数组中的页面路径地址必须存在pages文件夹中
pages数组中的页面路径地址下标为0，也就是第一个路径在普通编译模式下会作为启动页面，但不建议使用更换顺序的方式修改启动页， 可以通过新增或修改编译模式更改启动页
window配置示例
// app.json
{
"window":{
"navigationBarBackgroundColor": "#fff", // 导航栏背景颜色
"navigationBarTextStyle": "black", // 导航栏标题颜色，仅支持 black / white
"navigationBarTitleText": "weChart", // 导航栏标题文字内容
"backgroundColor": "#fff", // 窗口的背景色
"backgroundTextStyle": "light"， // 下拉 loading 的样式，仅支持 dark / light
"enablePullDownRefresh": true // 设置允许下拉刷新
}
}
注意： window的配置
1. navigationBarTextStyle导航栏标题颜色，仅支持 black / white
2. backgroundTextStyle下拉 loading 的样式，仅支持 dark / light
tabBar配置示例
// app.json
{
"tabBar": {
"color": "#000", // tab 上的文字默认颜色
"selectedColor": "#000", // tab 上的文字选中时的颜色
"backgroundColor": "#f5f5f5", // tab 的背景色
"list": [{
"pagePath": "pages/index/index", // 页面路径，必须在 pages 中先定义（必填）
"text": "首页", // tab 上按钮文字（必填）
"iconPath": "", // tab 上的图片路径,不支持网络图片
"selectedIconPath": "" // 选中时的图片路径
}, {
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "",
"selectedIconPath": ""
}]
}
}
注意：配置了tabBar后，底部栏只对配置的页面可见, 而且tabBar的设置至少两个，最多5个
3.页面配置
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。
注意：页面的配置只能设置 app.json 中部分 window 配置项的内容，
页面中配置项会覆盖 app.json 的 window 中相同的配置项。
5.小程序的组件
新建页面
通过app.json来新建
wxml和html的不同点
标签名字不一样，如html里常用的标签 div、section, article, a、span等，在小程序里标签是view、navigator、text等
view容器组件
view组价的基本使用
<view class="container">
<!-- 页面内容 -->
</view>
text文本组件
text的基本使用
<view class="container">
<!-- text组件 -->
<text>文本内容</text>
</view>
- text组件内只支持 text 嵌套
- 除了文本节点以外的其他节点都无法长按选中
### navigator页面链接组件
navigator的基本使用
// url的连接前面必须加上斜杆 “/”
<navigator url="/pages/demo/domo">
跳转到demo
</navigator>
注意：navigator不支持跳转到外部的url，
例如url=“https://www.baidu.com”
**跳转到tabBar的页面**
设置open-type值为switchTab，比如index页面是tabBar的页面，可以这样来设置
跳转到tabBar的使用方法
<navigator url="/pages/index/index" open-type="switchTab">
跳转到首页
</navigator>
### image图片组件
image的基本使用
<image
style="width: 200px; height: 200px;
mode="aspectFill"
src="图片地址">
</image>
注意：image组件默认宽度300px、高度240px
注2：image组件中二维码/小程序码图片不支持长按识别
图片的裁剪模式
常用的mode 有效值
- scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来
aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来
注意：微信朋友圈和QQ的说说页的图片裁剪方式，
可以通过设置 `mode=aspectFill` 实现类似功能
input组件
input的简单使用
input常用的属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | String | 输入框的初始内容 | |
| type | String | “text” | input 的类型 |
| password | Boolean | false | 是否是密码类型 |
| placeholder | String | 输入框为空时占位符 | |
| disabled | Boolean | false | 是否禁用 |
input type 有效值
| 值 | 说明 |
|---|---|
| text | 文本输入键盘 |
| number | 数字输入键盘 |
| idcard | 身份证输入键盘 |
| digit | 带小数点的数字键盘 |
button 按钮组件
button常用的属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| size | String | default | 按钮的大小 |
| type | String | default | 按钮的样式类型 |
| disabled | Boolean | false | 是否禁用 |
| loading | Boolean | false | 名称前是否带 loading 图标 |
| form-type | String | 用于form组件，可选值 submit/reset，触发form的提交和reset事件 |
form表单组件
form表单基本提交案例
第一步，设置button form-type='submit
第二步，通过bindsubmit设置form的提交事件处理函数
// wxml
<form bindsubmit="formSubmit">
<input type="text" name="username" placeholder></input>
<button form-type="submit">提交</button>
</form>
// js
formSubmit: function(e){
console.log(e.detail.value)
}
6.小程序样式
WXSS 对 CSS 进行了扩充以及修改，与 CSS 相比，WXSS 扩展的特性有：
- 全局样式和局部样式
- 尺寸单位
- 样式导入
1.全局样式和局部样式
app.wxss是全局样式,page中的wxss是页面的局部样式
2.rpx 尺寸单位
什么是rpx？
rpx可以使元素根据屏幕宽度进行自适应，小程序规定屏幕的宽度为750rpx， 也就是 100% = 750rpx; 50% = (750 / 2)rpx
其他自适应方法
web中使用rem，vw, vh, 百分比
使用方法
在开发小程序是建议使用750像素宽度的设计稿，这样设计稿的元素宽度是多少像素就直接设置为多少rpx
注意1rpx在某些屏幕上可能无效
3.样式导入
通过@import导入外部的样式，常用语公共样式
总结：
1.wxss 不需要导入到wxml，在页面目录下创建即可生效
2.app.wxss是全局样式,page中的wxss是页面的局部样式
3.rpx 尺寸单位
4.@import 样式导入
7.小程序生命周期
生命周期有程序的生命周期和页面的生命周期
1.程序的生命周期
文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html
在程序入口app.js中调用App(), 而且必须调用且只能调用一次，然后再App()的参数中可以声明生命周期函数
前台，后台的概念
- 前台：打开微信就进入小程序前台
- 后台：当用户点击右上角关闭，或者按了设备 Home 键离开微信，此时小程序并没有直接销毁，而是进入了后台；
常用的生命周期：
| 属性 | 描述 | 触发时机 |
|---|---|---|
| onLaunch | 监听小程序初始化 | 小程序初始化完成时（全局只触发一次） |
| onShow | 监听小程序显示 | 小程序启动，或从后台进入前台显示时 |
| onHide | 监听小程序隐藏 | 小程序从前台进入后台时 |
注意：小程序的运行机制
- 小程序没有重启的概念
- 当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁
2.页面的生命周期
页面需要通过Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。
文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
常用的生命周期：
| 属性 | 描述 |
| onLoad | 监听页面加载 |
| onShow | 监听页面显示 |
| onReady | 监听页面初次渲染完成 |
| onHide | 监听页面隐藏 |
onLoad
页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
参数说明, 通过query获取当前页面路径中的参数
| 名称 | 类型 | 说明 |
|---|---|---|
| query | Object | 打开当前页面路径中的参数 |
注意：页面需要访问api接口来初始化页面， 都可以在onLoad中调用
总结：
- 程序的生命周期: app.js中onLaunch在小程序初始化中触发
- 页面的生命周期: onLoad 只在页面加载的时候执行一次, onShow每次访问页面都会执行, 通常onLoad在onShow之前执行
本文转自：微信小程序开发
