- 移动端微信小程序
运行环境
是微信,全程使用微信服务
- 本文根据B站《黑马程序员前端微信小程序开发教程》整理
一、注册
- 微信公众平台扫码注册/登录
- 查看并记录 AppID
- AppID
二、开发者工具
三、小程序开发
(一)标签
小程序标签 |
含义 |
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
- 全局配置所有页面
(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、页面配置
- 就近原则,页面配置覆盖全局配置
(四)数据请求
- 宿主环境非浏览器,所以不存在跨域问题和 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 合法域名校验
- 仅限开发、调试阶段使用
(五)页面切换
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>
组件必备知识
(十)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 属默认选项忽略即可
- 使用
"usingComponents": {
"van-button": "../../miniprogram_npm/vant-weapp/button/index"
}
<van-button type="primary">按钮</van-button>
(十一)uniapp / 微信小程序项目