【移动端】微信小程序开发从入门到成神（精兵）

编程语言 2023-12-17 09:21:34 阅读次数: 0
  1. 移动端微信小程序运行环境是微信，全程使用微信服务
  2. 本文根据B站《黑马程序员前端微信小程序开发教程》整理

    文章目录

一、注册

二、开发者工具

  • 开发者工具（微信版 VSCode）
    在这里插入图片描述
  • 按需选择版本
    在这里插入图片描述
  • 安装后新建/导入项目
    在这里插入图片描述
  • 输入项目信息（已有项目故导入，新 AppID 为新建）
    在这里插入图片描述
  • 开发者工具布局
    在这里插入图片描述
  • 项目目录结构
        ├── pages      # 存放小程序的各个页面
    │   ├── index  # index页面
    │   │   ├── index.js     # 页面逻辑
    │   │   ├── index.json   # 页面配置    
    │   │   ├── index.wxml   # 页面结构
    │   │   └── index.wxss   # 页面样式表
    │   └── logs   # logs页面
    │       ├── logs.js      # 页面逻辑
    │       ├── logs.json    # 页面配置
    │       ├── logs.wxml    # 页面结构
    │       └── logs.wxss    # 页面样式表
    ├── utils
    │   └── util.js
    ├── app.js     # 小程序的逻辑文件
    ├── app.json   # 小程序的配置文件
    ├── app.wxss   # 全局公共样式文件
    └── project.config.json   # 全局项目配置
  • 更多详情

三、小程序开发

（一）标签

小程序标签 含义
view div
text span
image img
picker select
navigator a
button button
block 包裹容器，不渲染
swiper 滑块视图容器
map 腾讯地图
icon 微信图标
progress 进度条
wxs 过滤器，类似 js

（二）基本语法

  • 语法规则多基于 Vue，可参考使用

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、全局配置

  • 全局配置文件 app.json
类型 含义
pages 记录当前小程序所有页面的存放路径
window 全局设置小程序窗口的外观
tabBar 设置小程序底部的 tabBar 效果
style 是否启用新版的组件样式
（1）window
  • 全局配置所有页面
    在这里插入图片描述
（2）tabBar
  • 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
  • list 属性
属性 类型 必填 说明
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’,	// 请求的接口地址，必须基于 https 协议
		method :GET,					// 请求的方式
		data: {
    
    							// 发送到服务器的数据
			name : ' zs',
			age: 22
		},
		success: (res) => {
    
     			// 请求成功之后的回调函数
			console.log(res)
		}
	})
}

2、POST

postInfo(){
    
    
	wx.request({
    
    
		url:"https://domain’,	// 请求的接口地址，必须基于 https 协议
		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、声明式导航

  • <navigator>导航组件（类似 a 标签）
属性 说明 必填 默认值
topen-type=‘switchTab’ 跳转 tabBar 页面 是
topen-type=‘navigate’ 跳转非 tabBar 页面 否 跳转非 tabBar 页面
topen-type=‘navigateBack’
delta=‘n’		 后退导航
后退层级		 是
否		 delta = ‘1’ 
// 跳转 tabBar 页面
<navigator url='/pages/home/home' topen-type='switchTab'>导航到 tabBar 页面<navigator/>
// 跳转非 tabBar 页面
<navigator url='/pages/info/info' topen-type='navigate'>导航到非 tabBar 页面<navigator/>
<navigator url='/pages/info/info'>导航到非 tabBar 页面<navigator/>

2、编程式导航

  • 调用小程序导航 api
（1）wx.switchTab()
  • 导航到 tabBar
属性 类型 必填 说明
url string 是 需要跳转的 tabBar 页面路径，不能带参数
success function 是 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数
（2）wx.navigateTo()
  • 导航到非 tabBar
属性 类型 必填 说明
url string 是 需要跳转的非 tabBar 页面路径
success function 是 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数
（3）wx.navigateBack()
  • 后退导航
属性 类型 必填 说明
delta number 是 返回的页面数，默认 delta = 1
若大于现有页面数，返回首页
success function 是 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数 
// .wxml
<button bindtap="toDreams">导航到 tabBar</button>
<button bindtap="toData">导航到非 tabBar</button>
<button bindtap="backOne">编程式导航后退 1 层</button>
<button bindtap="backN">编程式导航后退 N 层</button>

// .js
// 编程式导航到 tabBar
toDreams(){
    
    
  wx.switchTab({
    
    
    url: '/pages/dreams/dreams',
  })
},
// 编程式导航到非 tabBar
toData(){
    
    
  wx.navigateTo({
    
    
    url: '/pages/info/info',
  })
},
// 编程式导航后退 1 层
backOne(){
    
    
  wx.navigateBack()
},
// 编程式导航后退 N 层
backN(){
    
    
  wx.navigateBack({
    
    
    delta: 5
  })
},

（六）页面传参

1、声明式导航传参

<navigator url='/pages/info/info?name=zs&age=11'>导航到 info 页面<navigator/>

2、编程式导航传参

// .wxml
<button bindtap="toData">导航到 info 页面</button>

// .js
// 编程式导航到非 tabBar
toData(){
    
    
  wx.navigateTo({
    
    
    url: '/pages/info/info?name=zs&age=11',
  })
}

3、onLoad 接收导航参数

  • 通过声明式/编程式导航传参所携带的参数，可以直接在 onLoad 事件中获取并赋值到 data 对象
// options 为导航传递过来的参数对象
onLoad(options){
    
    
	this.setData({
    
    
		query: toptions 
	)}
}

（七）页面事件

1、下拉刷新

  • 移动端专有名词，指通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为，推荐页面单独开启
"enablePullDownRefresh ": true,		// 开启下拉刷新
"backgroundColor": "#efefef",		// 修改下拉刷新背景色
"backgroundTextStyle": "dark"		// 修改下拉刷新圆点色（dark/light）

2、上拉触底

  • 移动端专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为
"onReachBottomDistance":100		// 默认值为 50，默认为 px 单位无需手动添加

（八）生命周期

1、应用生命周期函数

  • 小程序在app.js中声明应用生命周期函数
App({
    
    
	onLaunch(options) {
    
     },		// 小程序初始化完成时，全局触发一次（初始化数据）
	onShow(options) {
    
     },		// 小程序启动，或从后台进入前台显示时触发
	onHide() {
    
     }				// 小程序从前台进入后台时触发
)}

2、页面生命周期函数

  • 小程序在页面.js中声明页面生命周期函数
Page({
    
    
	onLoad(options){
    
     },			// 监听页面加载，一个页面只调用一次（初始化数据）
	onShow() {
    
     },				// 监听页面显示
	onReady() {
    
     },				// 监听页面初次渲染完成，一个页面只调用一次（修改页面内容）
    onHide() {
    
     },				// 监听页面隐藏
	onUnload() {
    
     	}			// 监听页面卸载，一个页面只调用一次
)}

（九）自定义组件

1、创建并使用自定义组件

  • 创建组件
    • 项目根目录 => components 文件夹 => 组件文件夹
  • 引入组件
    • 全局引入：app.json，多页面内使用
    • 局部引入：页面.json，单页面内使用
// .json
"usingComponents":{
    
    
	"组件名": "组件路径"
}
  • 使用组件
// .wxml
<组件名></组件名>

2、组件样式

（1）组件样式隔离
  • 组件之间、组件与页面之间，样式互不影响
  • app.wxss 的全局样式对组件无效
  • 仅 class 选择器有样式隔离，id / 属性 / 标签选择器不受样式隔离影响
  • 建议在组件和引用组件的页面中使用 class 选择器，不使用 id / 属性 / 标签选择器
（2）组件样式隔离选项
  • 如果用外界控制组件内部的样式，可以通过stylelsolation修改组件的样式隔离选项，以下两种方法均可
// 在组件的 js 文件中新增如下配置
Component({
    
    
	options: {
    
    
		styleIsolation: "isolated'
	}
})
// 在组件的 .json 文件中新增如下配置
"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: {
    
    				// 1、完整定义属性的方式【需要默认值】
			type: Number，		// 属性值的数据类型
			value: 10			// 属性默认值
		},
		max: Number			// 2、简化定义属性的方式【不用默认值】
		
	}
})

<my-test1 max="10"></my-test1>

组件必备知识

在这里插入图片描述

（十）npm 包

1、运行环境

  • 微信小程序运行环境不同于 PC 端，不支持依赖Node.js 内置库、浏览器内置对象、C++ 插件的包

2、Vant Weapp

（1）介绍
  • Vant Weapp：轻量、可靠的小程序 UI 组件库，类似 ElementUI
（2）安装与使用
  • 安装：微信开发者工具中右击目录空白处 => 在外部终端窗口打开 => npm init -y
// 通过 npm 安装
npm i vant-weapp -S --production

// 通过 yarn 安装
yarn add vant-weapp --production
  • 构建：微信开发者工具中点击工具 => 构建 npm，并点击详情 => 本地设置 => 勾选使用 npm 模块选项
    • 注意：本人开发者工具版本1.06.2303220，无【使用 npm 模块】选项，猜测新版工具 npm 属默认选项忽略即可
      在这里插入图片描述
  • 使用
    • 引入组件
// app.json
"usingComponents": {
    
    
  "van-button": "../../miniprogram_npm/vant-weapp/button/index"	// 本地相对路径
}
    • 使用组件
// .wxml 
<van-button type="primary">按钮</van-button>

（十一）uniapp / 微信小程序项目

猜你喜欢

转载自blog.csdn.net/weixin_64210950/article/details/130038475
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022