- 移动端微信小程序
运行环境
是微信,全程使用微信服务 - 本文根据B站《黑马程序员前端微信小程序开发教程》整理
一、注册
- 微信公众平台扫码注册/登录
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f06873e431e28cf28f02938f33a013a2.png)
- 查看并记录 AppID
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/271f408fec5f8c4ed910f26b3af9c34c.png)
- AppID
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0991d5870e5d0654ce0a6c1cfc7bbcd8.png)
二、开发者工具
三、小程序开发
(一)标签
小程序标签 | 含义 |
---|
view | div |
text | span |
image | img |
picker | select |
navigator | a |
button | button |
block | 包裹容器,不渲染 |
swiper | 滑块视图容器 |
map | 腾讯地图 |
icon | 微信图标 |
progress | 进度条 |
wxs | 过滤器,类似 js |
(二)基本语法
1、数据绑定
类型 | 语法 |
---|
内容 | {{ 变量名 }} |
属性 | 属性=“{{ 变量名 }}” |
运算 | 三元 / 算数表达式 |
2、事件绑定
类型 | 语法 |
---|
tap | bindtap / bind:tap |
input | bindinput / bind:input |
change | bindchange / bind:change |
3、事件传参与数据同步
类型 | 语法 |
---|
处理 data 数据 | this.setData(dataObject) |
事件传参 | data-参数名=“{{ 参数 }}” |
事件取参 | e.target.dataset.参数名 |
input 取值 | e.detail.value |
data-input 数据同步 | data 定义数据变量 => 动态绑定 value => this.setData(数据变量:e.detail.value) |
4、条件渲染
(1)wx:if
wx:if = "{{ }}"
wx:elif = "{{ }}"
wx:else
(2)hidden
hidden = "{{ }}"
5、列表渲染
(1)wx:for
wx:for = "{{ Array }}"
{{ index }}
{{ item }}
wx:for-index = "{{ newindex }}"
wx:for-item = "{{ newitem }}"
{{ newindex }}
{{ newitem }}
(2)wx:key
wx:key = "id"
6、wxss
(1)rpx
- 规定 750rpx 等于屏幕宽度
- px 换算 rpx :750 / 屏幕宽度
- rpx 换算 px:屏幕宽度 / 750
(2)@import
@import “相对路径”
7、iconfont
(三)项目配置
1、全局配置
类型 | 含义 |
---|
pages | 记录当前小程序所有页面的存放路径 |
window | 全局设置小程序窗口的外观 |
tabBar | 设置小程序底部的 tabBar 效果 |
style | 是否启用新版的组件样式 |
(1)window
- 全局配置所有页面
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/93d31d8601d0d2db82ece4e943ebb9e6.png)
(2)tabBar
属性 | 类型 | 必填 | 默认值 | 描述 |
---|
list | Array | 是 | tab 列表,详见 list 属性说明 | tab 范围 2-5 |
color | HexColor | 否 | tab 文字默认色 | 仅支持十六进制 |
selectedColor | HexColor | 否 | tab 文字选中色 | 仅支持十六进制 |
backgroundColor | HexColor | 否 | tab 背景色 | 仅支持十六进制 |
borderStyle | string | 否 | black | tabbar 上边框的颜色,仅支持 black / white |
position | string | 否 | bottom | tabBar 位置,仅支持 bottom / top (top 时无 icon) |
custom | boolean | 否 | false | 自定义 tabBar |
属性 | 类型 | 必填 | 说明 |
---|
pagePath | string | 是 | 页面路径,必须在 pages 中先定义 |
text | string | 是 | tab 按钮文字 |
iconPath | string | 否 | position 为 top 时,不显示 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片 |
selectedIconPath | string | 否 | position 为 top 时,不显示 选中时图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片 |
2、页面配置
- 就近原则,页面配置覆盖全局配置
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/93d31d8601d0d2db82ece4e943ebb9e6.png)
(四)数据请求
- 宿主环境非浏览器,所以不存在跨域问题和 ajax 请求,仅发起
网络数据请求
- 出于安全考虑,微信小程序限制网络数据请求
wx:request()
- 仅支持
HTTPS
类型接口 - 配置 request 合法域名,将接口域名添加到
信任列表
登录微信小程序管理后台
=> 开发
=> 开发设置
=> 服务器域名
=> 修改 request 合法域名
1、GET
getInfo(){
wx.request({
url:"https://domain’,
method :GET,
data: {
name : ' zs',
age: 22
},
success: (res) => {
console.log(res)
}
})
}
2、POST
postInfo(){
wx.request({
url:"https://domain’,
method :POST,
data: {
name : ' zs',
age: 22
},
success: (res) => {
console.log(res)
}
})
}
3、onLoad
onLoad:function(){
this.getInfo()
this.postInfo()
}
4、跳过 HTTPS 合法域名校验
- 若后端仅提供 http 协议接口,在微信开发者工具中,临时开启
开发环境不校验请求域名、TLS 版本及 HTTPS 证书
选项,跳过request 合法域名校验 - 仅限开发、调试阶段使用
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c654b7ec7c848fab9861fcf7420f6c20.png)
(五)页面切换
1、声明式导航
属性 | 说明 | 必填 | 默认值 |
---|
topen-type=‘switchTab’ | 跳转 tabBar 页面 | 是 | |
topen-type=‘navigate’ | 跳转非 tabBar 页面 | 否 | 跳转非 tabBar 页面 |
topen-type=‘navigateBack’ delta=‘n’ | 后退导航 后退层级 | 是 否 | delta = ‘1’ |
<navigator url='/pages/home/home' topen-type='switchTab'>导航到 tabBar 页面<navigator/>
<navigator url='/pages/info/info' topen-type='navigate'>导航到非 tabBar 页面<navigator/>
<navigator url='/pages/info/info'>导航到非 tabBar 页面<navigator/>
2、编程式导航
(1)wx.switchTab()
属性 | 类型 | 必填 | 说明 |
---|
url | string | 是 | 需要跳转的 tabBar 页面路径,不能带参数 |
success | function | 是 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数 |
(2)wx.navigateTo()
属性 | 类型 | 必填 | 说明 |
---|
url | string | 是 | 需要跳转的非 tabBar 页面路径 |
success | function | 是 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数 |
(3)wx.navigateBack()
属性 | 类型 | 必填 | 说明 |
---|
delta | number | 是 | 返回的页面数,默认 delta = 1 若大于现有页面数,返回首页 |
success | function | 是 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数 |
<button bindtap="toDreams">导航到 tabBar</button>
<button bindtap="toData">导航到非 tabBar</button>
<button bindtap="backOne">编程式导航后退 1 层</button>
<button bindtap="backN">编程式导航后退 N 层</button>
toDreams(){
wx.switchTab({
url: '/pages/dreams/dreams',
})
},
toData(){
wx.navigateTo({
url: '/pages/info/info',
})
},
backOne(){
wx.navigateBack()
},
backN(){
wx.navigateBack({
delta: 5
})
},
(六)页面传参
1、声明式导航传参
<navigator url='/pages/info/info?name=zs&age=11'>导航到 info 页面<navigator/>
2、编程式导航传参
<button bindtap="toData">导航到 info 页面</button>
toData(){
wx.navigateTo({
url: '/pages/info/info?name=zs&age=11',
})
}
3、onLoad 接收导航参数
- 通过声明式/编程式导航传参所携带的参数,可以直接在 onLoad 事件中获取并赋值到 data 对象
onLoad(options){
this.setData({
query: toptions
)}
}
(七)页面事件
1、下拉刷新
- 移动端专有名词,指通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为,推荐
页面单独开启
"enablePullDownRefresh ": true,
"backgroundColor": "#efefef",
"backgroundTextStyle": "dark"
2、上拉触底
- 移动端专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为
"onReachBottomDistance":100
(八)生命周期
1、应用生命周期函数
App({
onLaunch(options) { },
onShow(options) { },
onHide() { }
)}
2、页面生命周期函数
Page({
onLoad(options){ },
onShow() { },
onReady() { },
onHide() { },
onUnload() { }
)}
(九)自定义组件
1、创建并使用自定义组件
- 创建组件
- 项目根目录 => components 文件夹 => 组件文件夹
- 引入组件
- 全局引入:app.json,多页面内使用
- 局部引入:页面.json,单页面内使用
"usingComponents":{
"组件名": "组件路径"
}
<组件名></组件名>
2、组件样式
(1)组件样式隔离
- 组件之间、组件与页面之间,样式互不影响
- app.wxss 的全局样式对组件无效
- 仅 class 选择器有样式隔离,id / 属性 / 标签选择器不受样式隔离影响
- 建议在组件和引用组件的页面中
使用 class 选择器
,不使用 id / 属性 / 标签选择器
(2)组件样式隔离选项
- 如果用外界控制组件内部的样式,可以通过
stylelsolation
修改组件的样式隔离选项,以下两种方法均可
Component({
options: {
styleIsolation: "isolated'
}
})
"styleIsolation":"isolated"
stylelsolation | 默认值 | 描述 |
---|
isolated | 是 | 启用样式隔离,在自定义组件内外,使用 class 指定的样式不会相互影响 |
apply-shared | 否 | 页面 wxss 样式影响自定义组件,但自定义组件 wxss 样式不影响页面 |
shared | 否 | 页面 wxss 样式影响自定义组件,自定义组件 wxss 样式也影响页面 和其他设置 apply-shared 或 shared 的自定义组件 |
3、组件数据、方法和属性
(1)组件数据
- 用于组件模板渲染的私有数据,需要定义到 data 节点
(2)组件方法
事件处理函数
和自定义方法
定义到 methods 节点- 自定义方法建议以
_
开头
(3)组件属性
- 组件对外属性
properties
,用来接收外界传递到组件中的数据 - 小程序中,properties 等同 data 数据,但一般设置前者为传入数据,后者为私有数据
Component({
properties: {
max: {
type: Number,
value: 10
},
max: Number
}
})
<my-test1 max="10"></my-test1>
组件必备知识
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6c9c4816e84e5e0961ca62879251e661.png)
(十)npm 包
1、运行环境
- 微信小程序运行环境不同于 PC 端,不支持依赖
Node.js 内置库
、浏览器内置对象
、C++ 插件
的包
2、Vant Weapp
(1)介绍
(2)安装与使用
- 安装:微信开发者工具中右击目录空白处 => 在外部终端窗口打开 => npm init -y
npm i vant-weapp -S --production
yarn add vant-weapp --production
- 构建:微信开发者工具中点击工具 => 构建 npm,并点击详情 => 本地设置 => 勾选
使用 npm 模块
选项
- 注意:本人开发者工具版本1.06.2303220,无【使用 npm 模块】选项,猜测新版工具 npm 属默认选项忽略即可
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/47547b63646e40af0d3f9ec1c73ad910.png)
- 使用
"usingComponents": {
"van-button": "../../miniprogram_npm/vant-weapp/button/index"
}
<van-button type="primary">按钮</van-button>
(十一)uniapp / 微信小程序项目