小程序与普通网页开发的区别
- 网页开发渲染线程和脚本是一个过程，而小程序二者是分开的，分别运行在不同的线程
- 网页开发者可以操作DOM和BOM，小程序缺少操作DOM和BOM的方法，导致了例如JQuery，Zepto等在小程序中无法运行
- 小程序的运行环境与nodejs环境也不相同，所以一些npm的包在小程序中也是无法运行的
- 从小程序基础库版本2.2.1开始支持使用npm安装第三方包
小程序开发流程
- 注册小程序账号
- 为了获取AppID，AppID就显示我们的身份证一样，是唯一的而且很重要，后续的所有开发流程会基于这个AppID来完成
- 直接在微信小程序的官网注册
- 通过微信公众号注册
条件是已经有微信公众号(并且企业级，个人不可以)
优点是如果公众号已经认证过了，小程序不需要再次认证，省去了认证时间和费用
- 安装开发者工具
- 开发/测试/上传代码（上传到微信服务器）
- 提交审核
- 发布上线 发布小程序以后，我们才可以在微信中搜索到我们开发的小程序
- 错误查询/性能监控 登录官网->开发->运维中心
如何让vscode支持编写小程序代码
微信开发者工具的安装及使用
注意实现
- 小程序项目中不能嵌套小程序项目
- 创建小程序项目，不能是云开发，代码块
快速创建一个小程序
- 有AppID 官网-> 开发-> 开发设置->中找到AppID
- 没有AppID， 我们可以使用小程序提供的测试号
小程序的目录结构
- pages 这里的每个文件夹都代表一个小程序的页面
- app.js 全局逻辑代码
- app.json 全局配置文件
- app.wxss 全局样式文件
小程序4种文件类型
- js逻辑文件
- json 配置文件
- wxml 小程序框架设计的，套标签语言，结合小程序基础组件，事件系统可以构建出页面结果
- wxss 小程序样式文件
js
- 脚本执行顺序
当app.js执行结束后，小程序会按照开发者在app.json中定义的pages的顺序，逐一执行 - 作用于 同浏览器中运行的脚本文件有所不同，小程序的脚本的作用域同nodejs更为相似，在文件中什么的变量和函数只在该文件中有效，不同的文件中可以声明相同名字的变量和函数，不会互相影响
WXSS
- 小程序的尺寸单位rpx
可以根据屏幕宽度进行自适应, 规定屏幕宽度750px，如果在iphone6上，屏幕宽度为375物理像素， 则750rpx = 375px，，1rpx = 0.5物理像素 - 定义在app.wxss中的样式为全局样式，它会被注入到每个小程序页面中，在page的wxss文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss中相同的配置
- 样式导入 在css中，开发者可以这样应用另一个样式文件: @import url('./app.css') 在小程序中，我们依然可以这样实现引用写法是 @import './app.css'
官方样式库: 点我 - 选择器 小程序目前支持的选择器有：
| 选择器 | 样例 | 描述 |
|---|---|---|
| .class | .intro | 选择所有拥有class="intro"的组件 |
| #id | #firstname | 选择拥有 id="firstname" 的组件 |
| element | view | 选择所有view组件 |
| element,element | view,checkbox | 选择所有的view和checkbox组件 |
| ::after | view::after | 在view组件后插入 |
| ::before | view::before | 在所有view组件前插入 |
image组件
image组件默认宽度300ox，高度225px(320 * 240)
注意: 如果我们想让image组件上的高度随宽度等比例自适应，应该给image设置mode例如：
<image src="{{avatarUrl}}" mode="widthFix"></image>
text组件
除了文本节点以外的其他节点都无法长按选中
数据绑定
- 内容
<view>{{message}}</view>
- 属性
<view id="{{id}}"></view>
- 运算符
<view hidden="{{flag ? true : false}}">1112</view>
事件绑定及事件处理函数
事件是视图层到逻辑层得通讯方式，可以将用户的欣慰反馈到逻辑层处理
事件对象是可以携带额外信息如：id，dataset
- 事件分类
- 冒泡事件
- 非冒泡事件
-事件绑定 - 事件绑定得写法同组件得属性，以key,value得形式
key 以bind或者catch，然后跟上事件得类型，如bindtap、catchtap
** bind事件绑定不会阻止事件冒泡，catch事件绑定可以阻止冒泡事件向上冒泡** - 事件对象
- type代表事件类型
- tagName 当前组件得类型
- dataset 事件源组件上又data-开发得自定义属性得集合
以data-开头、多个单词由-链接，大写会自动转小写，驼峰-后首字母会自动大写
tabbar
"tabBar": {
"color": "#000000", // 未被选中时得颜色
"selectedColor": "#000000", // 选中时文字颜色
"borderStyle": "black", // 上边框
"position": "bottom", // tabBar位置
"backgroundColor": "#ffffff", // tabBar背景颜色
"list": [{ // tabBar列表 最少两项，，最多五项
"pagePath": "pagePath", // 选项路径
"text": "text", // 选项文字
"iconPath": "iconPath", // 选中前icon
"selectedIconPath": "selectedIconPath" // 选中后icon
},
{
"pagePath": "pagePath",
"text": "text",
"iconPath": "iconPath",
"selectedIconPath": "selectedIconPath"
}]
}
路由
- wx.switchTab 跳转到tabBar页面，并关闭其他所有非tabBar页面
- wx.relaunch 关闭所有页面并打开指定页面
- wx.redirectTO 关闭当前页面，跳转到应用内某个页面，但是不允许跳转到tabBar
- wx.navigateTo 保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabBar页面，使用wx.navigateBack 可以返回原页面，小程序中页面栈最多十层
- wx.navigateBack 关闭当前页面，返回上一页面或多级页面，可通过getCurrentPages获取当前的页面栈，决定需要返回几层
页面的生命周期
- onload 监听页面加载 只在页面初始化时候加载一次
- onshow 监听页面显示 每次显示页面都会执行
- onReady 监听页面初次渲染完成
- onHide 监听页面隐藏
- onUnload 监听页面卸载
转发
只有在页面js中监听了 onShareAppMessage 方法右上角才会有转发
- 自定义转发内容
只需要在时间处理函数中return一个对象
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
console.log('分享');
return {
title:'自定义title',
path: '/pages/index/index',
imageUrl: "https://www.baidu.com/img/bd_logo1.png?where=super"
}
}
- 默认转发内容
如果我们没有在事件中return转发的内容，小程序会默认把当前页面的标题、路径及页面截图返回
