Native Development Records of WeChat Mini Programs

The required writing method for situations similar to ref interaction

// wxml
    <wux-calendar id="wux-calendar" />
// js
Page({
    data: {},
    onLoad(){
        let WUXCalendar = this.selectComponent('#wux-calendar')
        console.log(WUXCalendar,'WUXCalendar');
        WUXCalendar.touchMove = true
    },
})
// json
{
    "navigationStyle": "default",
    "navigationBarTitleText": "预约",
    "usingComponents": {
        "wux-cell-group": "/miniprogram_npm/wux-weapp/cell-group/index",
        "wux-cell": "/miniprogram_npm/wux-weapp/cell/index",
        "wux-calendar": "/miniprogram_npm/wux-weapp/calendar/index"
    }
}

Reference npm package

npm init Initialize npm

Download the npm package. For example: npm i wux-weapp -S --production
project.config.jsonModify the configuration in the file
{
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}
Click on WeChat developer tools: Tools => Build npm => Build successfully => Extra files
Refer to the npm package plug-in method
json file for the page
{
    "navigationStyle": "default",
    "usingComponents": {
        "wux-cell-group": "/miniprogram_npm/wux-weapp/cell-group/index",
        "wux-cell": "/miniprogram_npm/wux-weapp/cell/index",
        "wux-calendar": "/miniprogram_npm/wux-weapp/calendar/index"
    }
}
wxml file for the page
<wux-calendar id="wux-calendar" />
js file of the page
Page({
    data: {},
    onLoad(){
        let WUXCalendar = this.selectComponent('#wux-calendar')
        console.log(WUXCalendar,'WUXCalendar'); // 可获取组件方法
        WUXCalendar.touchMove = true
    },
})
The style configuration that references the npm package is in the global app.wx
@import './miniprogram_npm/wux-weapp/styles/index.wxss';

NavigateTo jump and pass parameters in WeChat applet

// 跳转
goAbout(e) {
    wx.navigateTo({
        url:`/pages/make/about/index?key=value&key2=value2`
    })
}
// 接收参数
onLoad: function (options) {//此处接收传递过来的参数wx.navigateTo跳转时传递的参数
  console.log(options.key);
  console.log(options.key2);
  //如果要在页面中使用
  this.setData({
     id: options.key
  })
},
//  注意 ：可能是版本区别，有的是这样写的
onLoad(option) {
  console.log(option.query.id);
  console.log(option.query.time);
}

The wx.navigateBack() function returns to the previous page and passes parameters

// 不需要传参
wx.navigateBack()

// 需要传参
// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码
// 此处是 A 页面
wx.navigateTo({
 url: 'B?id=1'
})
// 此处是 B 页面
wx.navigateTo({
 url: 'C?id=1'
})
// 在 C 页面内 navigateBack，将返回 A 页面
wx.navigateBack({
 delta: 2
})

Component component

Monitor changes in object properties attached, observer

Support for monitoring changes to single or multiple properties in an object

Component({
    properties: {
      type: {
          type: String,
          value: '',
          observer: function (newV) {
              console.log(newV,'newV');
          }
      },
   },
  observers: {
    'some.flag.**': function(flag) {
      // 使用 setData 设置 this.data.some.flag本身或其下任何子数据字段时触发
      // （除此以外，使用 setData 设置 this.data.some 也会触发）
      flag=== this.data.some.flag
    },
  },
  attached: function() {
    // 这样会触发上面的 observer
    this.setData({
      'some.flag': { /* ... */ }
    })
    // 这样也会触发上面的 observer
    this.setData({
      'some.flag.xxx': { /* ... */ }
    })
    // 这样还是会触发上面的 observer
    this.setData({
      'some': { /* ... */ }
    })
  }
})

Component life cycle

page loding

// loding 显示
wx.showLoading({ title: '加载中' })
// loding 隐藏
wx.hideLoading()

Similar to v-show method hidden

<view hidden="{
   
   {tabsType !== 'project'}}">显示</view>

Similar to v-if method wx:if

<view wx:if="{
   
   {isFab}}" catchtap="goToDo" class="make_fab_button make_fab_button_todo"> 新增 </view>

There are 3 native notification pop-up windows in the WeChat applet

wx.showToast({
    title: '操作成功！',  // 标题
    icon: 'success',   // 图标类型，默认success 图标支持开发文档的icon
    duration: 1500   // 图标停留时间，默认1500ms
})

wx.showToast({
    title: '加载中...',//提示的标题
    icon: 'loading',//icon
    duration: 1500 //图标停留的时间
})

wx.showToast({
    title: '未上线',
    icon: 'none',//icon
    duration: 1500 //停留时间
})

WeChat Mini Program - Popup Dialog Box

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

The difference between onLoad and onShow when the page requests data for the first time


  onLoad(e) { // 页面加载数据，从详情页回退本页 不会 再次触发
    // e 里带有路由 传递的参数
  },
  onShow() { // 页面加载数据，从详情页回退本页 会 再次触发
    let that = this
    app.getUser(function (user) {
      that.setData({ user });
      //加载
      that.loadInfo()
    });
  },

Routing jump difference

wx.navigateBack() // 可返回原页面 
wx.reLaunch({ url: `/pages/make/index` }) // 关闭所有页面，打开到应用内的某个页面。
wx.switchTab({ url: `/pages/make/index` }) //  可跳转至tabBat页面。 
wx.navigateTo({ url: `/pages/make/index` }) //  不能跳转至tabBar页面。   
wx.redirectTo() //  关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar

Nested H5 page web-view

applet

<web-view src="http://localhost:8000/calendarDom/12&213421412&123123211"></web-view>

Wechat terminal vue3

<template>
        <div v-if="isMini">微信: {
   
   { routerId }}</div>
        <div v-if="!isMini">不是微信: {
   
   {routerId}}</div>
</template>

<script>
import { ref, onMounted, reactive, defineProps, toRefs, watch } from "vue";
import { useRouter } from 'vue-router';
export default {
    name:'calendarDom'
    setup() {
        const props = defineProps({})
        const $router = useRouter();
        // 1. 先定义一个空的响应式数据( ref 定义的)
        // 2 setup中返回定义的数据，需要获取哪个 dom 元素，就在对应元素上使用 ref 属性绑定该数据即可。
        let data = reactive({
            routerId:$router.currentRoute.value.params.id, // 获取 微信传参的路由参数
            isMini: /miniProgram/i.test(navigator.userAgent),// 判断是不是微信环境
        })
        return {
            ...toRefs(data),
        }
    }
}
</script>
<style>
</style>

vue3 dynamic routing parameter passing

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
// 引用的两种方法
import callPage from "../view/callPage.vue"; // 方法一

//路由数组
const routes = [
    {
        path: "/",
        name: "callPage",
        component: callPage,
        children: []
    },
    {
        path: "/calendarDom/:id",
        name: "calendarDom",
        component: () => import('../view/calendarDom.vue'), // 方法二
        children: []
    }
]

//路由对象
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes //上面的路由数组
})

//导出路由对象，在main.js中引用
export default router

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
.use(router)
.mount('#app')

// App.vue

<script setup>
</script>

<template>
  <router-view></router-view>
</template>

<style scoped>
</style>

wxml typesetting multiple spaces

decode="{ {true}}"

<text decode="{
   
   {true}}">空格 &nbsp;&nbsp;&nbsp;&nbsp; 空格 </text>

Click on the picture to enlarge and long press to save

<!-- 点击图片 放大 -->
<image src="{
   
   {accessory}}" class='icon100' data-imgUrl="{
   
   {accessory}}" bindtap="setLookImage"></image> 
<!-- 显示放大图片 并 长按进行保存 -->
<view wx:if="{
   
   {!!lookImage}}" class="fellow_lookImage" data-imgUrl="{
   
   {''}}" bindtap="setLookImage">
  <image src="{
   
   {lookImage}}" show-menu-by-longpress></image>
</view>

Page({
  data: {
    accessory:'',
    lookImage:'',
  },
  setLookImage(e){
    const lookImage = e.currentTarget.dataset.imgurl
    this.setData({ lookImage })
  }
})

upload image wx.chooseImage

1. Use the API wx.chooseImage(OBJECT)

wx.chooseImage(OBJECT)

Choose an image from your local photo album or take a photo with your camera.

Description of OBJECT parameters:

parameter	type	required	illustrate
count	Number	no	The maximum number of pictures that can be selected, the default is 9
sizeType	StringArray	no	original original image, compressed compressed image, both are available by default
sourceType	StringArray	no	album selects pictures from the album, camera uses the camera, both are available by default
success	Function	yes	If successful, return the local file path list tempFilePaths of the image
fail	Function	no	Callback function for interface call failure
complete	Function	no	The callback function of the end of the interface call (the call will be executed successfully or failed)

Note: The temporary path of the file can be used normally during the current startup of the applet. If you need to save it permanently, you need to actively call wx.saveFile, and it can be accessed when the applet is started next time.

success return parameter description:

parameter	type	illustrate	minimum version
tempFilePaths	StringArray	A list of local file paths for images
tempFiles	ObjectArray	The local file list of the picture, each item is a File object	1.2.0

The File object structure is as follows:

field	type	illustrate
path	String	local file path
size	Number	Local file size, unit: B

var util = require('../../utils/util.js')
Page({
  data:{
    src:"../image/pic4.jpg"
  },
  gotoShow: function(){var _this = this
   wx.chooseImage({
     count: 9, // 最多可以选择的图片张数，默认9
     sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
     sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
     success: function(res){
       // success
       console.log(res)
       _this.setData({
         src:res.tempFilePaths
       })
     },
     fail: function() {
       // fail
     },
     complete: function() {
       // complete
     }
   })
  }

2. Image path for data binding

<view class="container">
  <view>
    <button type="default" bindtap="gotoShow" >点击上传照片</button> 
  </view>
  <view>
    <image class= "show-image" mode="aspectFitf" src="{
   
   {src}}"></image>
  </view>
</view>

1. wx.chooseImage calls the camera or album

2. <image class= "show-image" mode="aspectFitf" src="{ { src}}"></image> data binding

3. Dynamically modify the file path in js

var _this = this
wx.chooseImage({
  count: 9, // 最多可以选择的图片张数，默认9
  sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
  sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
  success: function(res){
    // success
    console.log(res)
    _this.setData({
      src:res.tempFilePaths
    })
  },
  fail: function() {
    // fail
  },
  complete: function() {
    // complete
  }

Picker has a search filter component && the keyboard pop-up overlay problem is solved

Subassembly

Since there will be a delay in obtaining the value of picker-view , it is used in conjunction with the & event to prevent the inconsistency of obtaining the selected valuebindchangebindpickstartbindpickend

// index.js
Component({
  options: {
    // 在组件定义时的选项中启用多slot支持
    multipleSlots: true
  },
  /**
   * 组件的属性列表
   */
  properties: {
    id:{
      type: String,
      value: 'demopicker'
    },
    // 初始化 
    initValue: {
      type: String,
      value: ''
    },
    // 父组件传递过来的数据列表
    items: {
      type: Array,
      value: []
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    //控制picker的显示与隐藏
    flag: true,
    // 用户输入的关键词
    searchValue:'',
    // 滚动选择的
    setValues: [],
    // 滚动选择的索引
    selectSchoolIndex:'',
    itemsList:[],
    show:true
  },
  /**
   * 组件的方法列表
   */
  methods: {
  /**
  * @name: 搜索
  * @author: camellia
  * @date: 20211129
  */
  bindKeyInput(e){
    let self = this;
    const val = e.detail.value
    const list = self.data.items.filter(fv => fv.realname.includes(val) && fv )
    this.setData({ itemsList: [...list] })
    // self.triggerEvent('searchSchool', e.detail.value);
  },
  /**
  * @name: 隐藏picker
  * @author: camellia
  * @date: 20211129
  */
  hiddeDatePicker(){
    let self = this;
    self.setData({ flag: !self.data.flag, searchValue:'' })
  },
  /**
  * @name: 展示picker
  * @author: camellia
  * @date: 20211129
  */
  showDatePicker(){
    let self = this;
    self.setData({
      flag: !self.data.flag
    })
    self.getItems()
  },
  /**
  * @name: 选择好后，点击确定
  * @author: camellia
  * @date: 20211129
  */
  confirm(){
    let self = this;
    // 获取用户选择的
    let item = self.data.itemsList[self.data.selectSchoolIndex] ? self.data.itemsList[self.data.selectSchoolIndex] : self.data.itemsList[0];
    // 通过发送自定义事件把用户选择的传递到父组件
    console.log(item,'item');
    self.triggerEvent('confirm', item);
    self.setData({ flag: !self.data.flag, searchValue:'' })
  },
  /**
  * @name: 用户滚动picker时，获取滚动选择的索引
  * @author: camellia
  * @date: 20211129
  */
  bindChange(e){
    let self = this;
    self.setData({
      // 用户选择的索引
      selectSchoolIndex:e.detail.value[0]
    })
  },
  bindpickstart(){ // 滚动选择开始
    this.setData({show: false})
  },
  bindpickend(){ // 滚动选择结束
    setTimeout(()=>{
      this.setData({show: true})
    },500)
  },
  /**
   * @name: 获取初始化信息
   * @author: camellia
   * @date: 20211130
   */
  getItems(e){
    let self = this;
    this.setData({ itemsList: [...self.data.items] })
    if (self.data.itemsList.length && self.data.initValue) {
      let itemsList = self.data.itemsList
      for (let i = 0; i < itemsList.length; i++) {
        if (self.data.initValue == itemsList[i].id) {
          self.setData({ setValues: [i] })
          return
        }
      }
    }
    self.setData({ setValues: [0] })
  },
},
})

<view class="date-background" hidden="{
    
    {flag}}"  id="{
    
    {demopicker}}">
  <view class='date-gray-background' bindtap='hiddeDatePicker'></view>
  <view class='date-container'>
    <view class="transparent">
      <view class='date-confirm'>
        <view bindtap='hiddeDatePicker' class="quxiao font-size-text">取消</view>
        <!-- cursor-spacing="350" 键盘弹框弹起 避免选项被键盘遮挡 -->
         <input class="search-input" cursor-spacing="350" maxlength="10" value="{
    
    {searchValue}}" bindinput="bindKeyInput" placeholder="输入筛选" placeholder-class="placeholderStyle"/>
        <view hidden="{
    
    {show}}" class="quxiao font-size-text">确定</view>
        <view hidden="{
    
    {!show}}" bindtap='confirm' class="queding font-size-text">确定</view>
      </view>
      <picker-view
        wx:if="{
    
    {itemsList.length}}"
        indicator-class="indicator"
        value="{
    
    {setValues}}"
        bindchange="bindChange"
        bindpickstart="bindpickstart"
        bindpickend="bindpickend"
        indicator-style="height: 100rpx;"
        mask-style="height:700rpx;"
        style="width: 100%; height: 85%;position:absolute;bottom:0rpx;text-align:center;background:white"
      >
        <picker-view-column class="pickViewColumn">
          <view wx:for="{
    
    {itemsList}}" wx:key="id" style="line-height: 104rpx">{
    
    {item.realname}}</view>
        </picker-view-column>
      </picker-view>
      <view wx:if="{
    
    {!itemsList.length}}"
        indicator-style="height: 100rpx;"
        mask-style="height:700rpx;"
        style="width: 100%; height: 86%;position:absolute;bottom:0rpx;text-align:center;background:white;box-sizing: border-box;padding-top: 20rpx;">
          暂无匹配数据
      </view>
    </view>
  </view>
</view>

.date-background {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.date-gray-background {
  position: fixed;
  width: 100%;
  top: 0;
  background: rgba(0, 0, 0, .5);
  height: calc(100% - 500rpx);
  z-index: 9999;
}
.date-container {
  position: fixed;
  width: 100%;
  height: 600rpx;
  overflow: hidden;
  background: #fff;
  bottom:0;
  z-index: 9999;
}

.date-confirm {
  display: flex;
  justify-content: space-between;
  height: 80rpx;
  align-items: center;
  padding:0 20rpx;
  border-bottom:2rpx solid #eee;
}
.pickViewColumn{
  height: 700rpx;
}
.indicator{
  height: 80rpx;
  border: 1rpx solid #E5E8E8;
}
.font-size-text{
  font-size: 32rpx;
}
.quxiao{
  color: rgb(146, 141, 141);
}
.queding{
  color: #12A4Fa;
}
.placeholderStyle{
  font-size: 28rpx;
  background-color: #eee;
  padding-left: 8rpx;
}
.search-input{
  width: 70%;
  height: 56rpx;
}

{
  "component": true,
  "usingComponents": {}
}

parent component

{
  "usingComponents": {
      "MySeachPicker":"/components/MySeachPicker"
  }
}


    <view >
      <view >
        <view >下拉选择</view>
        <view >
          <button bindtap="showSchoolPicker">点击</button>
        </view>
      </view>
      <MySeachPicker id="demopicker" initValue="{
    
    {siteconsultantInfo.id || ''}}" items="{
    
    {creatorList}}" bindconfirm="confirm"/>
    </view>

Page({
  data: {
    statusList:[],//状态
  },
  onLoad() {
    let self = this;
    // 获取自定义 picker实例
    self.demopicker = self.selectComponent("#demopicker");
    console.log(self.demopicker,'self.demopicker');
  },
  onShow() { },
  confirmSchool(){
    let self = this;
    // 隐藏自定义picker
    self.demopicker.hiddeDatePicker();
  },
  confirm(e){
    console.log(e.detail,'e隐藏自定义picker');
  },
  showSchoolPicker(){
    let self = this;
    console.log(self.demopicker,'self.demopicker');
        self.demopicker.showDatePicker()
  },
})

input triggers with mobile keyboard search

<input class='search_input' type='text' confirm-type='search' bindconfirm='toSearch' ></input>
//js部分
toSearch(e){
 console.log(e.detail.value) //e.detail.value 为input框输入的值
}

The local viewport scrolls to the bottom to trigger an event

<view class="followUp-list">
  <scroll-view bindscrolltolower="touchBottom" enhanced="{true}" scroll-y="{true}" scroll-with-animation="{true}"  lower-threshold='50'>
    <view class="followUp-list-item" wx:for="{
   
   {followUpList}}">
      <view class="text-center followUp-flex2"  data-item="{
   
   {item}}" bindtap="gotoDelit">{
   
   {item.account_name}}</view>
      <view class="text-left followUp-flex2"  data-item="{
   
   {item}}" bindtap="gotoDelit">{
   
   {item.node_realname}}</view>
      <view class="text-left followUp-flex4 eee-color"  data-item="{
   
   {item}}" bindtap="gotoDelit">
        <view class="text-left"> 状态: {
   
   {item.follow_type_title}}</view>
        <view class="text-left"> 时间: {
   
   {item.follow_time}}</view>
        <view class="text-left">{
   
   {item.explain}}</view>
      </view>
      <view class="text-center followUp-flex2" data-item="{
   
   {item}}" bindtap="taskChangeStatus">{
   
   {item.status_title}}</view>
    </view>
  </scroll-view>
</view>

touchBottom(){
  console.log(123);
},

.followUp-list{
  scroll-view {
    width: 100%;
    height: 380rpx;
  }
}

Adaptive page setting scroll height


<view class="InitialRecord_details">
  <scroll-view bindscrolltolower="touchBottom" style="height: {
   
   {scrollViewHeight}}px;" enhanced="{true}" scroll-y="{true}" scroll-with-animation="{true}" lower-threshold='50'>
    <view wx:for="{
   
   {lookList}}" class="InitialRecord_details_list">
        <view> 2023年1月1日 </view>
    </view>    
    <view wx:if="{
   
   {lookList.length <= 0}}" class="zanwu_list">
      暂无数据
    </view>
  </scroll-view>
  <button id="id_v_search" class="InitialRecord_details_back_btn" bindtap="btnBack">返回</button>
</view>


// pages/customer/InitialRecord/details/index.js
import { Ajax } from '../../../../utils/ajax.js';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    lookList: [],
    page: 1,
    pageSize: 3,
    customer_id: 0,
    windowHeight: 0,
    scrollViewHeight: 0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const { customer_id = 0 } = options
    this.setData({ customer_id })
    this.getData()
    const that = this
    wx.getSystemInfo({
      success: function(res) {
        that.setData({ windowHeight: res.windowHeight });
      }
    });
    let query = wx.createSelectorQuery().in(this);
    // 然后逐个取出节点信息
    // 选择器的语法与jQuery语法相同
    query.select('#id_v_search').boundingClientRect();
    // 执行上面所指定的请求，结果会按照顺序存放于一个数组中，在callback的第一个参数中返回
    query.exec((res) => {
      // 取出 搜索框布局 的高度
      let reduceHeight = res[0].height;
      // 然后就是做个减法
      let scrollViewHeight = that.data.windowHeight - reduceHeight;
      // 算出来之后存到data对象里面
      that.setData({ scrollViewHeight });
      console.log(scrollViewHeight,'scrollViewHeight');
    });
  },
  btnBack() {
    wx.navigateBack()
  },
  // 获取列表数据
  getData() {
    wx.showLoading({
      title: '加载中...',
    })
    const { page = 1, pageSize = 20, customer_id = 0, lookList = [] } = this.data
    const params = { page, pageSize, customer_id }
    Ajax('/follow/data', { ...params }, 'GET').then(res => {
      console.log(res, 'follow/data')
      const { status, data = {list: []}, paginator = {currentPage: 1, total: 0} } = res
      let newData = data.list
      const {currentPage= 1, total= 0} = paginator
      if (lookList.length < total) {// 处理 下拉加载分页 数据
        newData = [...lookList, data]
      }
      if (status) {
        this.setData({ // 处理 下拉加载分页
          page: lookList.length < total ? + this.data.page + 1 : currentPage,
          lookList: newData 
        })
      }
      wx.hideLoading()
    }).catch(() => wx.hideLoading())
  },
  touchBottom() { // 处理 下拉触发 分页请求
    this.getData()
  },
})


.InitialRecord_details{
  width: 100%;
  height: 100%;
  flex: 1;
  overflow: hidden;
  scroll-view {
    width: 100%;
    padding: 10rpx 20rpx;
    box-sizing: border-box;
    .InitialRecord_details_list{
      width: 100%;
      margin: 10rpx auto;
      border: 1px solid #ccc;
      box-sizing: border-box;
      padding: 10rpx;
    }
  }
  .zanwu_list{
    width: 100%;
    text-align: center;
    padding-top: 50rpx;
  }
  .InitialRecord_details_back_btn{
    width: 100%;
    background-color: #81D3F8;
    color: #fff;
  }
}

Parent component changes child component style

// 组件 js

Component({

  externalClasses: ['class-active]

});

// 组件 wxml

<view class="son-dom class-active"></view>

// 父页面 wxml

<sondom class-active='make_matters_no_content'/>

// class名不能使用驼峰，否则不生效 

// 如果要重写子组件中的属性，需要 !important

.make_matters_no_content{

  background: red!important;

}

Jump to another applet in the WeChat applet

// 一
 wx.navigateToMiniProgram({
  appId: 'wx111a111111a1aa11',  //appid
  path: '/pages/view/index',//path
  extraData: { }, // 参数
  envVersion: 'develop', // 开发版 develop、体验版 trial、正式版 release  
  success(res) {// 打开成功
    console.log('成功')
  }
})
// 二
<navigator target="miniProgram" open-type="navigate" app-id="" path="" version="release">
</navigator>