Dossiers de développement natifs des mini-programmes WeChat

La méthode d'écriture requise pour des situations similaires à l'interaction 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"
    }
}

Forfait npm de référence

npm init Initialiser npm

Téléchargez le package npm. Par exemple: npm i wux-weapp -S --production
project.config.jsonModifier la configuration dans le fichier
{
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}
Cliquez sur les outils de développement WeChat : Outils => Construire npm => Construire avec succès => Fichiers supplémentaires
Reportez-vous à la méthode de plug-in du package npm
fichier json pour la 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"
    }
}
fichier wxml pour la page
<wux-calendar id="wux-calendar" />
fichier js de la page
Page({
    data: {},
    onLoad(){
        let WUXCalendar = this.selectComponent('#wux-calendar')
        console.log(WUXCalendar,'WUXCalendar'); // 可获取组件方法
        WUXCalendar.touchMove = true
    },
})
La configuration de style qui fait référence au package npm se trouve dans le global app.wx
@import './miniprogram_npm/wux-weapp/styles/index.wxss';

NavigateTo sauter et passer des paramètres dans l'applet WeChat

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

La fonction wx.navigateBack() revient à la page précédente et passe les paramètres

// 不需要传参
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
})

Composant composant

Surveiller les changements dans les propriétés des objets attachés, observateur

Prise en charge de la surveillance des modifications apportées à une ou plusieurs propriétés d'un objet

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

Cycle de vie des composants

chargement de page

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

Similaire à la méthode v-show masquée

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

Similaire à la méthode v-if wx:if

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

Il y a 3 fenêtres contextuelles de notification natives dans l'applet WeChat

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

Mini programme WeChat - Boîte de dialogue contextuelle

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

La différence entre onLoad et onShow lorsque la page demande des données pour la première fois


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

Différence de saut de routage

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

Vue Web de la page H5 imbriquée

applet

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

Terminal WeChat 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>

passage de paramètre de routage dynamique 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 composer plusieurs espaces

décode="{ {vrai}}"

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

Cliquez sur l'image pour l'agrandir et appuyez longuement pour enregistrer

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

télécharger l'image wx.chooseImage

1. Utilisez l'API wx.chooseImage(OBJECT)

wx.chooseImage(OBJECT)

Choisissez une image de votre album photo local ou prenez une photo avec votre appareil photo.

Description des paramètres OBJET :

paramètre	taper	requis	illustrer
compter	Nombre	Non	Le nombre maximum d'images pouvant être sélectionnées, la valeur par défaut est 9
type de taille	ChaîneTableau	Non	image originale originale, image compressée compressée, les deux sont disponibles par défaut
Type de Source	ChaîneTableau	Non	album sélectionne les images de l'album, l'appareil photo utilise l'appareil photo, les deux sont disponibles par défaut
succès	Fonction	Oui	En cas de succès, renvoie la liste des chemins de fichiers locaux tempFilePaths de l'image
échouer	Fonction	Non	Fonction de rappel en cas d'échec d'appel d'interface
complet	Fonction	Non	La fonction de rappel de la fin de l'appel d'interface (l'appel sera exécuté avec succès ou en échec)

Remarque : Le chemin temporaire du fichier peut être utilisé normalement lors du démarrage en cours de l'applet. Si vous avez besoin de l'enregistrer de manière permanente, vous devez appeler activement wx.saveFile, et il sera accessible au prochain démarrage de l'applet.

Description du paramètre de retour de réussite :

paramètre	taper	illustrer	version minimale
tempFilePathstempFilePaths	ChaîneTableau	Une liste de chemins de fichiers locaux pour les images
fichiers temporaires	Tableau d'objets	La liste de fichiers locale de l'image, chaque élément est un objet File	1.2.0

La structure de l'objet Fichier est la suivante :

champ	taper	illustrer
chemin	Chaîne	chemin du fichier local
taille	Nombre	Taille du fichier local, 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. Chemin d'image pour la liaison de données

<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 appelle l'appareil photo ou l'album

2. Liaison de données <image class= "show-image" mode="aspectFitf" src="{ { src}}"></image>

3. Modifier dynamiquement le chemin du fichier en 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 a un composant de filtre de recherche && le problème de superposition de pop-up du clavier est résolu

Sous-ensemble

Puisqu'il y aura un retard dans l'obtention de la valeur de picker-view , il est utilisé en conjonction avec l' événement & pour éviter l'incohérence de l'obtention de la valeur sélectionnéebindchangebindpickstartbindpickend

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

composant parent

{
  "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()
  },
})

déclencheurs d'entrée avec recherche de clavier mobile

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

La fenêtre locale défile vers le bas pour déclencher un événement

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

Hauteur de défilement des paramètres de page adaptatifs


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

Le composant parent modifie le style du composant enfant

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

}

Passer à une autre applet dans l'applet WeChat

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