微信小程序原生开发记录

Striver_598

已于 2023-07-19 14:41:27 修改

阅读量404

点赞数 1

文章标签：微信小程序前端 javascript 小程序

于 2023-02-08 12:01:48 首次发布

本文链接：https://blog.csdn.net/m0_53574149/article/details/128932818

版权

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

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

引用 npm 包

npm init 初始化一下npm
下载 npm 包。例如： npm i wux-weapp -S --production
project.config.json 文件里修改配置
{
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}
微信开发者工具点击：工具 => 构建 npm => 构建成功 => 多出的文件
引用 npm 包插件方式
页面的 json文件
{
    "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 文件
<wux-calendar id="wux-calendar" />
页面的 js 文件
Page({
    data: {},
    onLoad(){
        let WUXCalendar = this.selectComponent('#wux-calendar')
        console.log(WUXCalendar,'WUXCalendar'); // 可获取组件方法
        WUXCalendar.touchMove = true
    },
})
引用 npm 包的样式配置在全局 app.wx
@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

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

类似于 v-if 方法 wx:if

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

微信小程序原生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

小程序端

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

微信端 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 动态路由传参

// 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 排版多个空格

decode="{{true}}"

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

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

<!-- 点击图片 放大 -->
<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 })
  }
})

上传图片 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
     }
   })
  }

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

<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 调用相机或相册

2、<image class= "show-image" mode="aspectFitf" src="{{src}}"></image> 数据绑定

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

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

父组件

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

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

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

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

自适应页面设置滚动高度


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

父组件改变子组件样式

// 组件 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;

}

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

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

获取某个 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页面

<view class='every' style='height:{{height}}'></view>

获取当前页面的高度

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

点击复制文案

<view class="scroll_view_item" wx:for="123456789" data-item="复制文案：{{item}}" bindtap="handleCopy">{{item}}</view>

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

微信拨打电话

<view bindtap="call" data-phone="{{18721212122}}">187****4122</view>
// 启用电话 呼叫
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 组件使用
<scroll-view
  class="scroll-view_H"
  scroll-y="true"
  refresher-enabled="true" // 开启自定义下拉刷新 默认 false
  bindrefresherrefresh="handleRefresher" // 自定义下拉刷新被触发
  refresher-triggered="{{isTriggered}}" // 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
> 
//如果只开启 refresher-enabled="true" 页面只会下拉刷新，但是不会回去，下拉刷新的图标一直存在，为false后会退出刷新