Registros de desarrollo nativo de los miniprogramas de WeChat

El método de escritura requerido para situaciones similares a la interacción 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"
    }
}

Paquete npm de referencia

npm init Inicializar npm

Descargue el paquete npm. Por ejemplo: npm i wux-weapp -S --production
project.config.jsonModificar la configuración en el archivo
{
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}
Haga clic en las herramientas de desarrollo de WeChat: Herramientas => Generar npm => Generar correctamente => Archivos adicionales
Consulte el método de complemento del paquete npm
archivo json para la página
{
    "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"
    }
}
archivo wxml para la página
<wux-calendar id="wux-calendar" />
archivo js de la página
Page({
    data: {},
    onLoad(){
        let WUXCalendar = this.selectComponent('#wux-calendar')
        console.log(WUXCalendar,'WUXCalendar'); // 可获取组件方法
        WUXCalendar.touchMove = true
    },
})
La configuración de estilo que hace referencia al paquete npm está en la aplicación global.wx
@import './miniprogram_npm/wux-weapp/styles/index.wxss';

NavegarPara saltar y pasar parámetros en el applet de 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 función wx.navigateBack() regresa a la página anterior y pasa parámetros

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

componente componente

Supervisar los cambios en las propiedades de los objetos adjuntos, observador

Soporte para monitorear cambios en propiedades únicas o múltiples en un objeto

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

Ciclo de vida del componente

página de carga

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

Similar a método v-show oculto

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

Similar al método v-if wx:if

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

Hay 3 ventanas emergentes de notificación nativas en el applet de 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 //停留时间
})

Miniprograma WeChat - Cuadro de diálogo emergente

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

La diferencia entre onLoad y onShow cuando la página solicita datos por primera vez


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

Diferencia de salto de enrutamiento

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

Vista web de página H5 anidada

subprograma

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

paso de parámetros de enrutamiento dinámico 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 escribir varios espacios

decodificar="{ {verdadero}}"

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

Haga clic en la imagen para ampliar y presione prolongadamente para guardar

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

subir imagen wx.chooseImage

1. Usa la API wx.chooseImage(OBJECT)

wx.elegirImagen(OBJETO)

Elija una imagen de su álbum de fotos local o tome una foto con su cámara.

Descripción de los parámetros del OBJETO:

parámetro	tipo	requerido	ilustrar
contar	Número	No	El número máximo de imágenes que se pueden seleccionar, el valor predeterminado es 9
tipo de letra	matriz de cadenas	No	imagen original original, imagen comprimida comprimida, ambas están disponibles de forma predeterminada
tipo de fuente	matriz de cadenas	No	álbum selecciona imágenes del álbum, cámara usa la cámara, ambas están disponibles de forma predeterminada
éxito	Función	Sí	Si tiene éxito, devuelva la lista de rutas de archivos locales tempFilePaths de la imagen
fallar	Función	No	Función de devolución de llamada para falla de llamada de interfaz
completo	Función	No	La función de devolución de llamada del final de la llamada de interfaz (la llamada se ejecutará con éxito o fallará)

Nota: La ruta temporal del archivo se puede usar normalmente durante el inicio actual del subprograma. Si necesita guardarlo permanentemente, debe llamar activamente a wx.saveFile, y se puede acceder a él la próxima vez que se inicie el subprograma.

descripción del parámetro de retorno de éxito:

parámetro	tipo	ilustrar	versión mínima
TempFilePaths	matriz de cadenas	Una lista de rutas de archivos locales para imágenes
archivos temporales	matriz de objetos	La lista de archivos locales de la imagen, cada elemento es un objeto de archivo	1.2.0

La estructura del objeto Archivo es la siguiente:

campo	tipo	ilustrar
camino	Cadena	ruta de archivo local
tamaño	Número	Tamaño de archivo local, unidad: 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. Ruta de la imagen para el enlace de datos

<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 llama a la cámara o álbum

2. <clase de imagen = "show-image" mode="aspectFitf" src="{ { src}}"></image> vinculación de datos

3. Modifique dinámicamente la ruta del archivo 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 tiene un componente de filtro de búsqueda && el problema de la superposición emergente del teclado está resuelto

Subensamblaje

Dado que habrá un retraso en la obtención del valor de picker-view , se utiliza junto con el evento & para evitar la incoherencia en la obtención del valor seleccionadobindchangebindpickstartbindpickend

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

componente padre

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

disparadores de entrada con búsqueda de teclado móvil

<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 ventana gráfica local se desplaza hacia abajo para activar un evento

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

Altura de desplazamiento de configuración de página adaptativa


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

El componente principal cambia el estilo del componente secundario

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

}

Saltar a otro subprograma en el subprograma 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>