微信小程序开发基础
# 微信小程序开发基础
本文讲述微信小程序的开发基础。
建议：使用其他工具作为代码编辑器，使用微信开发着工具作为预览、编译工具。
同时要给第三方开发工具(如vscode)安装小程序开发插件，便于代码提示。
# 小程序开发者工具
主要设置： 设置外观 可以开发一个完整的 编译模式：通过配置编译模式，默认在预览页面预览指定页面。 预览和真机调试： 切后台：模拟小程序中页面的切换 清缓存：用到个人信息或本地存储时会用到。 微信账号详情： 可以修改appID 测试基础库：需要指定内核版本 不校验合法域名：要勾选上，否则无法请求外部的接口 弱网：支持模拟3G、4G、wifi等网络环境。 页面路径：在模拟器的下方可以看到页面的路径和参数 资源管理器： 代码编辑器： 调试器：类似于谷歌开发者工具
# 配置node环境
若想编译或预览小程序，那么必须事先配置好node环境。
若开发者工具所在的系统安装了NVM(node多版本管理工具)，那么需要做额外配置，开发者工具才能识别到nvm下的node环境。
修改工程根目录下的project.config.json，修改配置项beforeCompile、beforePreview、beforeUpload。示例如下：
"scripts": {
"beforeCompile": "source ~/.oh-my-zsh/lib/wangshibiao.zsh && npm run tsc",
"beforePreview": "source ~/.oh-my-zsh/lib/wangshibiao.zsh && npm run tsc",
"beforeUpload": "source ~/.oh-my-zsh/lib/wangshibiao.zsh && npm run tsc"
},
您根据实际的情况改为自己的配置即可。
# 小程序目录结构
WXML：类似于html WXSS：类似于css pages: 存放所有的页面代码 app.js：入口文件 sitemap: 只需要在发布时使用到。
# 小程序全局配置文件
app.json
建议在开发者工具中编辑配置，因为有智能提示。
# pages配置
- 定义了有哪些页面
注意不要写后缀名 - 自动生成一个页面相关文件
在开发者工具中，pages配置下增加一行，然后刷新即可。 - 设置“打开开发者工具时，默认打开某页面”
将对应页面的路由配置挪到首行。
# windows配置
nagvigationBar...: 导航栏配置，可以设置颜色、标题、标题的颜色。
# tabbar配置
用于配置小程序底部的菜单。 示例如下:
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "pages/icons/1.jpg",
"selectedIconPath": "pages/icons/1_selected.jpg"
},
{
"pagePath": "pages/logs/logs",
"text": "启动日志",
"iconPath": "pages/icons/2.jpg",
"selectedIconPath": "pages/icons/2_selected.jpg"
}]
}
# 页面配置
可以针对每个页面配置导航栏、上拉下拉刷新等。
# sitemap配置
用于微信搜索。
# 数据绑定
text相当于span标签 行内元素 不会换行。
view相当于div标签 块级元素 会换行
.js的示例：
// pages/demo/demo1.js
Page({
/**
* 页面的初始数据
*/
data: {
"username": "王世彪"
}
})
数据定义在Page.data下。
.wxml的示例：
<!--pages/demo/demo1.wxml-->
<view>{{username}}</view>
使用来做渲染。
# 运算(表达式)
支持在{{}}中使用表达式(如数字加减、字符串拼接、三元运算)。
# 数组或对象渲染
wx:for支持对数组或对象做渲染。
wx:key用于绑定item的唯一属性，用于提高性能。
wx:key="*this",标识数组是一个普通数组， *this表示是循环项。
当出现嵌套循环时，注意绑定的名称不要重名。
若只有一层循环的话，wx:for-item和wx:for-index可以不写，因为小程序已默认设置。
# block标签
- 占位符标签
- 页面渲染时会把该标签去掉。
# 条件渲染
- hidden
当标签频繁切换显示时，优先使用hidden
原理：通过添加样式的方式来切换显示。
不要和display样式混合使用，否则会被覆盖。 - wx:if
当标签不频繁切换显示时，优先使用wx:if
原理：把标签从页面结构中移除掉。
# 事件绑定
- 绑定输入框
bindinput
从事件源对象中找到对应的变量：e.detail.value 示例:
this.setData({
num: e.detail.value
})
- 绑定点击事件
bindtap
无法再小程序当中的事件中直接传参 通过自定义属性传递参数，然后在事件处理中从事件源获取自定义属性。
示例如下：
获取自定义属性operation
const operation = e.currentTarget.dataset.operation;
# 样式
# 单位
rpx，规定屏幕宽为750rpx。使得宽高自适应。
小程序中不需要主动引入样式文件。
需要把设计稿中的px转换为rpx单位。
利用calc属性,可以在wxss中使用表达式,示例如下:
width: calc(750rpx * 100 / 375)
# 样式导入
使用@import导入样式表。
只支持相对路径。
# 样式选择器
不支持通配符*。
默认不支持less,但可以通过在vscode中添加插件即可实现。
less也支持导入。
# 组件
常见组件：view、text、rich-text、button、image、navigator、icon、swiper、radio、checkbox。
- view
替换原来的div标签 - text
文本标签
只能嵌套text
长按文字可以复制（只有该标签有这个功能）:添加属性selectable
可以对空格、回车进行编码 - image
腾讯对小程序的大小有要求，不能超过2M, 所以图片要使用网络图片。
image组件有默认宽高：宽320px,高240px
mode参数用来控制图片内容如何和image标签的宽和高做适应。
支持懒加载： 添加属性lazy-load - swiper
用于轮播。 - nagigator
导航组件。
支持绝对路径和相对路径。
是块级元素，默认会换行，可以直接加宽度和高度。
target: 跳转到自己或其他小程序。 - rich-text
通过nodes属性来实现
- 标签字符串(
常用) - 对象数组
- button
button除了拥有按钮的功能外，还有如下开放能力：
open-type:
1. contact 直接打开 客服对话功能 需要在微信小程序的后台配置
只能够通过真机调试来打开
2. share 转发当前的小程序到微信朋友中 不能把小程序分享到朋友圈
3. getPhoneNumber 获取当前用户的手机号码信息 结合一个事件来使用 只有企业版的小程序账号有权限获取用户的收集号码
1> 绑定一个事件bindgetphonenumber
2> 在事件的回调函数中，通过参数来获取信息
3> 获取到的信息，已经加密过了
需要用户自己搭建小程序的后台服务器，在后台服务器中进行解析手机号码，返回到小程序中
4. getUserInfo 获取当前用户的个人信息
1> 使用方法类似获取用户的手机号码
2> 可以直接获取未加密的字段
5. launchApp 在小程序中直接打开app
1> 需要在app中通过app的某个链接打开小程序
2> 在小程序中再通过这个功能重新打开app
6. openSetting 打开小程序内置的授权页面
1> 授权页面中只会出现用户曾经点击过的权限
7. feekback 打开小程序内置的意见反馈页面
只能够通过真机调试来打开
- icon图标
- radio
需要和radio-group搭配使用 - checkbox
需要和checkbox-group搭配使用
# 自定义组件
创建组件 -> 声明组件 -> 使用组件
# 创建组件
新建目录，利用开发者工具的新建Component
# 声明组件
在要使用组件的地方声明组件, 在usingComponents参数下声明。
# 事件
- 页面.js文件中，存放事件回调函数的时候，存放在data同层级下
- 组件.js文件中，存放事件回调函数的时候，必须要存在methods中