微信小程序

标准开发模式

微信小程序不同于网页开发(浏览器+代码编辑器)

一、基础搭建

开发工具下载

下载地址:小程序开发工具

文件清理:

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. 文件下载

下载链接

echarts-for-weixin
在这里插入图片描述

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
  1. url 要跳转的页面路劲 绝对路径 相对路径
  2. 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. 点击事件

  1. bindtap 和 catchtap 的区别
    在微信小程序中,bindtap和catchtap是事件绑定的两种方式,它们有以下区别:

事件冒泡:bindtap会将事件传递给父节点进行处理,而catchtap会阻止事件继续冒泡到父节点。换句话说,当一个元素上的bindtap事件被触发时,如果该元素的父节点也有相同类型的bindtap事件,父节点的事件处理函数也会被执行;而catchtap则只会触发当前元素的事件处理函数。

绑定顺序:多个元素同时绑定了bindtap和catchtap事件时,它们的触发顺序是不同的。bindtap的触发顺序是由子元素向父元素冒泡的顺序(即从内到外);而catchtap的触发顺序是由父元素向子元素捕获的顺序(即从外到内)。

阻止默认行为:对于某些具有默认行为的元素(如、等),bindtap可以通过返回false来阻止默认行为的触发;而catchtap无法阻止这些默认行为。

用途:在一般情况下,推荐使用bindtap来进行事件绑定,因为它可以与父元素的事件一起工作,并且在处理冒泡事件时更加灵活。只有在确实需要阻止事件冒泡或不想触发父元素的事件处理函数时,才使用catchtap。

综上所述,bindtap和catchtap在微信小程序中具有不同的事件冒泡行为和触发顺序。根据具体需求,选择适合的方式来绑定和处理事件。

  1. 如何使用 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 终端命令行步骤

打开终端:

  1. 视图–终端–新建终端
  2. 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 官网地址

vant waepp 官网地址

七、二维码扫码参数获取

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
    }
  }
})
7.2.2 流程

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值