微信小程序原生开发 记录

遇到类似 ref 交互的 情况 所需写法

// wxml
    
// 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"
    }
}

引用 npm 包

1. npm init 初始化一下npm
2. 下载 npm 包。例如： npm i wux-weapp -S --production
3. project.config.json 文件里 修改配置

   1. {
        "setting": {
          "packNpmManually": true,
          "packNpmRelationList": [
            {
              "packageJsonPath": "./package.json",
              "miniprogramNpmDistDir": "./"
            }
          ]
        }
      }

4.  微信开发者工具 点击 ： 工具 => 构建 npm => 构建成功 => 多出的文件

5. 引用 npm 包插件 方式

   1. 页面 的 json文件

      1. {
             "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"
             }
         }

   2. 页面的 wxml 文件

   3. 页面的 js 文件

      1. Page({
             data: {},
             onLoad(){
                 let WUXCalendar = this.selectComponent('#wux-calendar')
                 console.log(WUXCalendar,'WUXCalendar'); // 可获取组件方法
                 WUXCalendar.touchMove = true
             },
         })

6. 引用 npm 包 的样式配置在全局 app.wx

   1. @import './miniprogram_npm/wux-weapp/styles/index.wxss';

微信小程序中navigateTo的跳转以及传递参数

// 跳转
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);
}

wx.navigateBack()函数返回上一页并传参

// 不需要传参
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 组件

监听对象属性的变化 attached 、observer

支持监听对象中单个或多个属性的变化

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': { /* ... */ }
    })
  }
})

组件生命周期

页面loding

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

类似于 v-show 方法 hidden

类似于 v-if 方法  wx:if

 新增 

微信小程序原生3种提示弹窗

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 //停留时间
})

微信小程序-弹出对话框

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

页面首次请求数据 onLoad 和 onShow 的区别

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

路由跳转 区别

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   

嵌套 H5 页面web-view

小程序端

 微信端 vue3

vue3 动态路由传参

// 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

wxml 排版 多个 空格

decode="{{true}}"

空格      空格 

点击图片放大 并 进行长按保存

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

上传图片 wx.chooseImage

一、使用APIwx.chooseImage(OBJECT)

wx.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

OBJECT参数说明：

参数	类型	必填	说明
count	Number	否	最多可以选择的图片张数，默认9
sizeType	StringArray	否	original 原图，compressed 压缩图，默认二者都有
sourceType	StringArray	否	album 从相册选图，camera 使用相机，默认二者都有
success	Function	是	成功则返回图片的本地文件路径列表 tempFilePaths
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

注：文件的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用 wx.saveFile，在小程序下次启动时才能访问得到。

success返回参数说明：

参数	类型	说明	最低版本
tempFilePaths	StringArray	图片的本地文件路径列表
tempFiles	ObjectArray	图片的本地文件列表，每一项是一个 File 对象	1.2.0

File 对象结构如下:

字段	类型	说明
path	String	本地文件路径
size	Number	本地文件大小，单位：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
     }
   })
  }

二、图片路径进行数据绑定

  
    点击上传照片 
  
  
    
  

1、wx.chooseImage 调用相机或相册

2、 数据绑定

3、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 带有 搜索 过滤 组件 && 键盘弹起覆盖 问题解决

子组件

由于 picker-view 的 bindchange 获取值会有延迟情况 所以 借用了 bindpickstart & bindpickend 事件结合使用防止获取选中值不一致问题

// 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] })
  },
},
})

.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": {}
}

父组件

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

    
      
        下拉选择
        
          点击
        
      
      
    

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 带有 手机键盘搜索触发

//js部分
toSearch(e){
 console.log(e.detail.value) //e.detail.value 为input框输入的值
}

局部视口滚动到底部触发事件

  
    
      {{item.account_name}}
      {{item.node_realname}}
      
         状态: {{item.follow_type_title}}
         时间: {{item.follow_time}}
        {{item.explain}}
      
      {{item.status_title}}
    
  


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

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

自适应页面 设置滚动高度

  
    
         2023年1月1日 
        
    
      暂无数据
    
  
  返回



// 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;
  }
}

父组件 改变 子组件 样式

// 组件 js

Component({

  externalClasses: ['class-active]

});

// 组件 wxml



// 父页面 wxml



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

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

.make_matters_no_content{

  background: red!important;

}

微信小程序中跳转另一个小程序

// 一
 wx.navigateToMiniProgram({
  appId: 'wx111a111111a1aa11',  //appid
  path: '/pages/view/index',//path
  extraData: { }, // 参数
  envVersion: 'develop', // 开发版 develop、体验版 trial、正式版 release  
  success(res) {// 打开成功
    console.log('成功')
  }
})
// 二

获取某个 dom 的 宽高

// js页面
//创建节点选择器
    var query = wx.createSelectorQuery();	// 创建节点查询器 query
    //选择id
    var that = this; // 获取this
    // 这段代码的意思是选择class=every的节点，获取节点位置信息的查询请求
    query.select('.every').boundingClientRect(function (rect) { 
    	console.log(res.width)
      that.setData({
        height: res.width + 'px' // 赋值操作
      })
    }).exec();
     query.selectViewport().scrollOffset().exec()//这段代码的意思是获取页面滑动位置的查询请求

// wxml页面

获取 当前页面的高度

wx.getSystemInfo({
  success: function(res) {
    that.setData({ windowHeight: res.windowHeight - 0 });
  }
});

点击复制文案

{{item}}

// 点击复制
handleCopy: function (e) {
  console.log(e.currentTarget.dataset.item);
  wx.setClipboardData({
    data: `${e.currentTarget.dataset.item}`,
    success: function (res) {
        wx.showToast({ title: '复制成功' })
    }
  })
}

微信拨打电话

187****4122
// 启用电话 呼叫
call(){
  const { phone } = e.currentTarget.dataset
  wx.makePhoneCall({ phoneNumber: phone })
}

phoneNumber	String	是	需要拨打的电话号码
success	Function	否	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

下拉刷新

1.
// app.json 配置
 "window": {
    ...，
    "enablePullDownRefresh":true, // 开启下拉刷新功能
    "backgroundTextStyle":"dark", // 下拉刷新 loding 动画 颜色
    "backgroundColor": "#efefef", // 下拉刷新 背景颜色
  },
2.
// 局部页面 json 配置
{
  "enablePullDownRefresh":true, // 开启下拉刷新功能
  "backgroundTextStyle":"dark", // 下拉刷新 loding 动画 颜色
  "backgroundColor": "#efefef", // 下拉刷新 背景颜色
}
// 局部页面 js 配置
	//生命周期函数--监听页面加载
  onLoad(options) {},
  //生命周期函数--监听页面初次渲染完成
  onReady() {
  },
  //生命周期函数--监听页面显示
  onShow() { },
  //生命周期函数--监听页面隐藏
  onHide() { },
  //生命周期函数--监听页面卸载
  onUnload() { },
  //页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh() { 
    setTimeout(()=> wx.stopPullDownRefresh(),1000) // 结束下拉动态
  },
  //页面上拉触底事件的处理函数
  onReachBottom() { },
  //用户点击右上角分享
  onShareAppMessage() { },
// scroll-view 组件使用
 
//如果只开启 refresher-enabled="true" 页面只会下拉刷新，但是不会回去，下拉刷新的图标一直存在，为false后会退出刷新