标准开发模式
微信小程序不同于网页开发(浏览器+代码编辑器)
一、基础搭建
开发工具下载
下载地址:小程序开发工具
文件清理:
1.删除默认文件夹:index、log
2.清空根目录app.js文件
3.清空根目录app.wxss
新建文件:
1.在pages文件夹下添加index文件夹,并且右键index文件夹新建page,同时在根目录app.json中进行注册页面:
{
"pages": [
"pages/index/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
二、页面编写
设计稿尺寸
750*1334的尺寸
主要是为了方便对应微信小程序的rpx的尺寸
样式导入
使用@import 语句可以导入外联样式表,@import 后跟需要导入的外联样式表的相对路径,用“;”表示语句结束
@import "common.wxss"
基础组件
组成:view + text
swiper:轮播组件,只能放置swiper-item标签
<swiper class="swiper"
indicator-color="#999"
indicator-active-color="green"
current="1"
interval="1000"
circular="true"
indicator-dots='true'>
<swiper-item>
swiper组件只能放
swiper-item组件1
<view>
放置容器标签
</view>
</swiper-item>
<swiper-item>
swiper-item组件2
</swiper-item>
<swiper-item>
swiper-item组件3
</swiper-item>
</swiper>
scroll-view :滑块组件
使用上注意三点(水平):
1.必须加宽度,
2.不能换行
3.滑动元素必须是行内块元素
垂直必须加高度
三、使用echarts
1. 文件下载
下载链接
2. 定制化echarts.js文件
由于echarts-for-weixin 文件本身较大,其中主要文件为echarts.js,可进行定制化功能下载,再替换文件,注意定制化echarts.js文件一定要与echarts-for-weixin文件内的版本相同,
定制化地址
3. 使用ec-canvas文件
替换ec-canvas文件下的echarts.js文件
4. 使用示例
wxml文件:
<view class="ec-container">
<ec-canvas canvas-id="echart-pie" ec="{{ec}}"></ec-canvas>
</view>
wxss文件:
.ec-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100vw;
height: 30vh;
}
ec-canvas {
width: 100%;
height: 100%;
}
json文件:
{
"navigationBarTextStyle": "white",
"navigationBarTitleText": "echarts图表",
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark",
"usingComponents": {
"ec-canvas": "../../common/ec-canvas/ec-canvas"
}
}
js文件:
import * as echarts from "../../ec-canvas/echarts"
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
canvas.setChart(chart);
var option = {
backgroundColor: 'rgba(255,255,255,0.8)',
tooltip: {
trigger: 'item'
},
legend: {//显示图例
show: true,
top: '5%',
left: 'center'
},
series: [{
label: {
normal: {
fontSize: 14
}
},
type: 'pie',
center: ['50%', '60%'],//位置
radius: ['20%', '30%'],//圈大小
data: [{//每一项
value: 3,
name: '数字农业 3个'
}, {
value: 2,
name: '体育产业 2个'
}, {
value: 7,
name: '乡村新业态 7个'
}, {
value: 3,
name: '其他产业 3个'
}
]
}]
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initChart
}
}
})
四、基础组件使用
1. picker 下拉组件基本使用
官方文档中主要是下拉示例数据中的数组都是数据值,而项目中数组单项都是对象类型,使用上需要注意一个属性range-key
示例
wxml文件:
<view class="section__title">普通选择器</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" mode="selector"
range-key="{{'name'}}">
<view class="picker">
当前选择:{{objectArray[index].name}}
</view>
</picker>
js文件:
Page({
data:{
objectArray: [
{
id: 0,
name: '美国'
},
{
id: 1,
name: '中国'
},
{
id: 2,
name: '巴西'
},
{
id: 3,
name: '日本'
}
],
index: 0
}
})
【注意】range-key="{{‘name’}}"的写法
2. 页面跳转
2.1 方法跳转
(1)wx.switchTab
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.switchTab({
url: '/index'
})
(2)wx.reLaunch
关闭所有页面,打开到应用内的某个页面(可传递参数)
wx.reLaunch({
url: 'test?id=1'
})
获取参数
Page({
onLoad (option) {
console.log(option.query)
}
})
(3)wx.redirectTo
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面(可传参数)
wx.redirectTo({
url: 'test?id=1'
})
获取参数
Page({
onLoad (option) {
console.log(option.query)
}
})
(4)wx.navigateTo
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面
wx.navigateTo({
url: 'test?id=1',
events: {
// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
}
})
监听
Page({
onLoad: function(option){
console.log(option.query)
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
eventChannel.emit('someEvent', {data: 'test'});
// 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data)
})
}
})
(5)wx.navigateBack
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层
// 此处是A页面
wx.navigateTo({
url: 'B?id=1'
})
// 此处是B页面
wx.navigateTo({
url: 'C?id=1'
})
// 在C页面内 navigateBack,将返回A页面
wx.navigateBack({
delta: 2
})
2.2 标签跳转
navigator标签的open-type
- url 要跳转的页面路劲 绝对路径 相对路径
- target 要跳转到当前的小程序 还是其他的小程序页面
self 默认值 跳转到自己的小程序页面
miniProgram 跳转到其他的小程序页面
(1)跳转到新页面:默认
<navigator open-type="navigate" url="/page/navigate/navigate?title=navigate">跳转到新页面</navigator>
(2)在当前页打开:redirect
<navigator open-type="redirect" url="../../redirect/redirect/redirect?title=redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
(3)切换 Tab:switchTab
<navigator open-type="switchTab" url="/page/index/index">切换 Tab</navigator>
(4)关闭所有页面,打开到应用内的某个页面:reLaunch
<navigator open-type="reLaunch" url="/pages/index/index">reLaunch 可以随便跳</navigator>
获取参数
Page({
onLoad: function(options) {
this.setData({
title: options.title
})
}
})
五、一些语法使用示例
1. 判断是否有网络
1.1 全局配置(用于跳转断网提示界面)
在app.js文件中的onLaunch函数中进行判断
import {configUtil} from './utils/configUtil'
App({
onShow: function(options) {
console.log("=============== 版本: "+ configUtil.version +" ===============");
},
onLaunch:function(options) {
//判断是否有网络
wx.onNetworkStatusChange((res) => {
if(!res.isConnected){
wx.navigateTo({
url: '/pages/cutOffInternet/cutOffInternet',
})
}
})
}
})
1.1 页面内配置(用于跳转断网提示界面)
2. 点击tabBar页刷新页面
2.1 实现点击tabBar页刷新又防止二次渲染(onLoad函数)
data中声明:firstLoad是否首次加载
data: {
firstLoad:true//是否首次加载
}
在onLoad函数中,更改值以确认是首次加载,防止点击tabBar二次刷新
onLoad(options) {
this.setData({
firstLoad:true
})
}
onTabItemTap是点击tabBar页事件,先判断是否已经加载过了(根据firstLoad值,true已经加载过了)
onTabItemTap(item) {
if (this.data.firstLoad){
this.setData({
firstLoad:false
})
return;
}else{
wx.redirectTo({
url: '/pages/homePage/homePage',
})
}
},
3. 下拉刷新
在json文件中设置:
"enablePullDownRefresh": true,
在js文件中的下拉刷新事件
onPullDownRefresh(){//下拉刷新
wx.showToast({
title: '加载中......',
icon: 'loading',
duration: 1000
})
//执行事件
}
配合下拉刷新结束事件
stopPullDown(){
wx.hideNavigationBarLoading() // 隐藏导航条加载动画
wx.stopPullDownRefresh()
}
4. 百度地图使用
百度地图配合微信小程序平台地址:百度小程序配置地址
环境配置:
wxml创建地图渲染dom
<view class="map_container">
<map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map>
</view>
wxss样式修改
.map_container{
width: 100%;
height: 100%;
}
map {
width: 100%;
height: 100%;
}
js文件,从其他页面跳转过来,携带地址location字段
var bmap = require('../../../../common/bmap/bmap-wx.min');
var wxMarkerData = [];
Page({
data: {
markers: [],
latitude: '',
longitude: '',
BMap: null,
specificLocation:'',//传递的位置信息
},
onLoad: function(option) {
this.setData({
specificLocation:option.location
})
this.setData({
BMap: new bmap.BMapWX({
ak: '秘钥'
})
})
this.toSearch(this.data.specificLocation)
},
toSearch: function (keyword) {
let that = this;//重要,必须
let fail = function(data) {
console.log(data)
};
let success = function(data) {
wxMarkerData = data.wxMarkerData;
that.setData({
markers: wxMarkerData
});
that.setData({
latitude: wxMarkerData[0].latitude
});
that.setData({
longitude: wxMarkerData[0].longitude
});
}
// 发起geocoding检索请求
that.data.BMap.geocoding({
address: keyword,
fail: fail,
success: success
});
}
})
bmap-wx.min.js下载地址:bmap-wx.min.js下载
5. 点击事件
- bindtap 和 catchtap 的区别
在微信小程序中,bindtap和catchtap是事件绑定的两种方式,它们有以下区别:
事件冒泡:bindtap会将事件传递给父节点进行处理,而catchtap会阻止事件继续冒泡到父节点。换句话说,当一个元素上的bindtap事件被触发时,如果该元素的父节点也有相同类型的bindtap事件,父节点的事件处理函数也会被执行;而catchtap则只会触发当前元素的事件处理函数。
绑定顺序:多个元素同时绑定了bindtap和catchtap事件时,它们的触发顺序是不同的。bindtap的触发顺序是由子元素向父元素冒泡的顺序(即从内到外);而catchtap的触发顺序是由父元素向子元素捕获的顺序(即从外到内)。
阻止默认行为:对于某些具有默认行为的元素(如、等),bindtap可以通过返回false来阻止默认行为的触发;而catchtap无法阻止这些默认行为。
用途:在一般情况下,推荐使用bindtap来进行事件绑定,因为它可以与父元素的事件一起工作,并且在处理冒泡事件时更加灵活。只有在确实需要阻止事件冒泡或不想触发父元素的事件处理函数时,才使用catchtap。
综上所述,bindtap和catchtap在微信小程序中具有不同的事件冒泡行为和触发顺序。根据具体需求,选择适合的方式来绑定和处理事件。
- 如何使用 bindtap 和 catchtap
下面我们将通过几个示例来演示如何使用 bindtap 和 catchtap。
2.1 使用 bindtap
首先,在 WXML 文件中添加一个按钮元素,并为其绑定一个 bindtap 事件:
<button bindtap="handleTap">点击我</button>
然后,在对应的 JS 文件中定义 handleTap 函数来处理点击事件:
Page({
handleTap: function() {
console.log('按钮被点击了');
}
})
在这个示例中,当用户点击按钮时,控制台会输出"按钮被点击了"。
2.2 使用 catchtap
接下来,我们再来看一个使用 catchtap 的示例。
在 WXML 文件中添加一个按钮元素,并为其绑定一个 catchtap 事件:
<button catchtap="handleTap">点击我</button>
然后,在对应的 JS 文件中定义 handleTap 函数来处理点击事件:
Page({
handleTap: function() {
console.log('按钮被点击了');
}
})
在这个示例中,当用户点击按钮时,同样会在控制台输出"按钮被点击了"。
结论
在微信小程序中,bindtap和catchtap是两种不同的事件绑定方式,并具有以下结论:
bindtap会将事件传递给父节点进行处理,而catchtap会阻止事件继续冒泡到父节点。
多个元素同时绑定了bindtap和catchtap事件时,它们的触发顺序也是不同的。bindtap从子元素向父元素冒泡触发,而catchtap从父元素向子元素捕获触发。
bindtap可以通过返回false阻止默认行为的触发,而catchtap无法阻止具有默认行为的元素的触发。
一般情况下,推荐使用bindtap来进行事件绑定,因为它可以与父元素的事件一起工作,并且在处理冒泡事件时更加灵活。只有在需要阻止事件冒泡或不想触发父元素的事件处理函数时,才使用catchtap。
根据实际需求和事件处理的要求,选择合适的事件绑定方式(bindtap或catchtap)来实现所需的功能。
六、引入vant组件
6.1 通过npm安装
6.1.1 终端命令行步骤
打开终端:
- 视图–终端–新建终端
- ctrl+~ 快捷键
# 通过 npm 安装
npm i @vant/weapp -S --production
【注意】电脑必须已经有node才能安装
6.2 修改 app.json
将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱
6.3 修改 project.config.json
开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
【注意】: 由于目前新版开发者工具创建的小程序目录文件结构问题,npm构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm的文件名,所以新版本的miniprogramNpmDistDir配置为 ‘./’ 即可
我这里使用的是新版本,所以配置‘./’即可:
6.4 创建package.json
正常执行 “npm i @vant/weapp -S --production”命令行之后会自动生成node_modules文件以及package.json、package-lock.json文件,如果没有就自己新创建一个package.json文件即可,内容:
{
"dependencies": {
"@vant/weapp": "^1.11.2"
}
}
6.5 构建npm
vant官网介绍是:
新版本微信开发者工具里面并没有相关配置,所以只需要直接构建即可:
工具–构建npm–完成构建即可
【注意】如果构建失败,一般就是找不到package.json、或者./miniprogram之类,应该是漏了步骤,重新捋顺步骤执行一遍即可。每一个需要npm i 引入的东西都可以把node_modules删除,但是一定要构建npm
6.6 测试使用
6.6.1 组件引入(建议局部引入,按需引入)
以 Button 组件为例,只需要在app.json或index.json中配置 Button 对应的路径即可
// app.json
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
6.7 官网地址
七、二维码扫码参数获取
7.1 服务端生成二维码流程
7.1.1 官网地址
小程序官方获取小程序api地址:小程序获取小程序api地址
7.1.2 获取小程序图片地址
https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN
请求方式:POST
参数:access_token
(1)获取access_token方法
地址:https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.html
https://api.weixin.qq.com/cgi-bin/token
请求方式:GET
参数:grant_type、appid、secret
(2)传递参数字段:scene
- scene 字段的值会作为 query 参数传递给小程序/小游戏。用户扫描该码进入小程序/小游戏后,开发者可以获取到二维码中的 scene
值,再做处理逻辑。 - 调试阶段可以使用开发工具的条件编译自定义参数 scene=xxxx 进行模拟,开发工具模拟时的 scene 的参数值需要进行
encodeURIComponent
(3)【注意】后端生成二维码需要添加扫描之后跳转二维码的地址路径,路径一定是要app.json文件内注册的地址路径,否则会无法生成图片
7.2 小程序端进行接收
7.2.1 接收示例
Page({
onLoad (options) {
// scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
if(options) {
let scene = decodeURIComponent(options.scene);
console.log(scene)
// 后续处理scene
}
}
})