Предисловие: В течение этого времени я руководил разработкой малых программ компании, я обобщил опыт разработки некоторых небольших программ, что удобно мне в дальнейшем для справки и чтобы мои коллеги меньше наступали на подводные камни. Внизу статьи функция распознавания QR-кода апплета скилл-класса и размытие по Гауссу апплета все сами собой залиты. Обмен приветствуется.
1. Класс кадра
1. Введение в шаблон и введение в конструктор компонентов, что выбрать?
Это только для отображения, рекомендуется использовать шаблон, в компоненте больше логики, рекомендуется использовать компонент. Так как шаблон не имеет своего js файла, то в списке задействована самостоятельная работа подпунктов списка, рекомендуется прописывать подпункты списка в виде компонентов.
Образец кода: Файл подкачки
<!--Wxml-->
<!--引用-->
<import src="goodlist.wxml"/>
<!--使用 goodList为page传入的数据-->
<template is="statement-goodlist" data="{{goodList}}"/>
2. Использование файла wxs
WXS используется более в качестве фильтра, файлы .wxs могут ссылаться другими файлами или тегами WXXS в WXML. Чтобы ссылаться на другие файловые модули WXS в модуле .wxs, вы можете использовать функцию нужды.
образец кода Страница документ - аналогичные эффекты фильтр
<!--wxml-->
<!--引用-->
<wxs src="../../assets/wxs/phonenum.wxs" module="phone" />
<!--使用-->
<text class='statement-adress-cellphone'>{{phone.phone(AddressInfo.phone)}}</text>
3. Жизненный цикл
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
// 前进-跳转到其他页面的时候
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
// 后退-点击当前页面返回的时候
}
Проблемы, которые можно решить, используя эти два жизненных цикла: Запретите пользователям быстро переключаться между страницами (A->B). Вызывает ошибку отображения текста в динамически устанавливаемой навбаре Быстрое переключение страниц может привести к тому, что асинхронные данные на странице A не будут возвращены, так что данные A будут возвращены только при переключении на страницу B, так что текст, отображаемый на панели навигации, будет заголовком панели навигации страницы A. . (То есть: заголовок навигационной панели страницы А — привет, а заголовок навигационной панели страницы Б — мир. При быстром изменении с А->Б, хотя он и находится на странице Б, панель навигации отображает привет вместо мира)
Ссылка на ссылку:Жизненный цикл onHide и onUnload в апплете
2. Общение
Если данные представляют собой автомобиль, канал или метод передачи — это дорога, по которой будет двигаться автомобиль. Следовательно, в среде, управляемой данными, мы должны научиться строить эту «дорогу» и позволять «автомобилю» ехать с высокой скоростью.
1. Страница общается с компонентом
1-1. Страница передает содержимое компоненту
page - имя атрибута страницы
компоненты — имя внешнего свойства компонента, которое получает объект свойств
страница
<!-- Wxml -->
<components-a components="{{page}}"></components-a>
<!-- Js -->
Page({
data: {
page: '父亲pages'
}
})
компоненты
страницы отца
<!-- Wxml -->
<!-- Js -->
Component({
/**
* 组件的属性列表
*/
properties: {
components: { // 属性名
type: String
}
},
/**
* 组件的方法列表
*/
methods: {
onTap: function () {
let page = this.data.components
console.log(page) // 我是父亲pages
}
}
})
1-2 Компоненты передают контент на страницу
Установите событие myevent для компонента, инициируйте событие myevent с помощью this.triggerEvent('myevent', myEventDetail) и передайте содержимое, а также используйте событие onMyEventshi на странице для отслеживания переданных данных.
страница
<!-- Wxml -->
<components-a bind:myevent="onMyEvent"></components-a>
<!-- Js -->
Page({
// 监听myevent事件
onMyEvent: function (e) {
console.log('接收a组件传递的内容:', e.detail) // '我是a组件'
}
})
компоненты
<!-- Wxml -->
<!-- 在自定义组件"components-a"中 -->
<button bindtap="onTap">点击</button>
<!-- Js -->
Component({
properties: {}
methods: {
onTap: function(){
var myEventDetail = '我是a组件'
this.triggerEvent('myevent', myEventDetail) // 触发组件上的“myevent”事件
}
}
})
2. Связь между компонентами
Два несвязанных компонента: передача данных через глобальные переменные или локальный кеш
Два связанных компонента (на одной родительской странице): с помощью вышеуказанного метода используйтеКомпонент => Страница => Компонентспособ передачи данных.
3. Связь между страницами
3-1. Используйте глобальную переменную app.globalData
3-2 Используйте локальный кеш wx.setStorageSync
3-3.url доставки
// A页面-传递数据
// 需要注意的是，wx.switchTab 中的 url 不能传参数。
wx.navigateTo({
url: '../pageD/pageD?name=raymond&gender=male'
})
// B页面-接收数据
// 通过onLoad的option
<!-- JS -->
...
Page({
onLoad: function(option){
console.log(option.name + 'is' + option.gender) // raymond is male
this.setData({
option: option
})
}
})
3-4 Управление данными предыдущей страницы страницей следующего уровня (путем получения объекта страницы для работы с данными)
Суть этого метода заключается в получении прототипа объекта других страниц,Затем измените данные, управляемые текущим объектом, с помощью метода прототипа setData.,
Пример выглядит следующим образом:
// pageE.js
Page({
data: {
index: 1
}
})
После перехода на следующую страницу F, предполагая, что в F есть операция, которая должна изменить данные в E, можно использовать следующий метод:
// pageF.js
...
Page({
changeIndexInE: function(){
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];
prevPage.setData({
index: 0
})
}
})
Этот метод может манипулировать данными страниц в стеке страниц,Это можно сделать, чтобы страница следующего уровня могла управлять данными группы страниц верхнего уровня..
Ссылка на ссылку:Айфанер - передача данных между страницами
4. Связь между страницами и шаблонами
страница
<!-- Wxml -->
<template is="msgItem" data="{{...item}}"/>
<!-- JS -->
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
Помимо переменных, входящий шаблон также может быть объектом метода события.. Например, событие клика в шаблоне может быть передано элементу, использующему этот шаблон.
Три, навыки
1. Индекс - это переменная, измените значение массива
Согласно документации, формат «массив [0].текст»: «измененные данные». Однако значение индекса, которое необходимо изменить в нашем реальном приложении, часто является динамическим, поэтому измените его следующим образом:
Образец кода:
// 修改某个数组的动态的值 --- 提前将数组对象准备好
// 索引index是变量， value是变量
var shipmentTypeObj = "shipmentType[" + index + "].code"
this.setData({[shipmentTypeObj]: value})
2. Другие методы инкапсуляции (если есть лучший метод, добро пожаловать на общение)
вот и все, вышеизложенное является кратким изложением всего моего текущего опыта работы с проектами Mini Program. Если вы считаете, что это полезно для вашего развития, вы можете поставить лайк и собрать его.Если я написал что-то не так, я надеюсь, что я могу указать на это. Если у вас есть лучшие идеи или предложения, вы можете выдвинуть их, чтобы связаться со мной. Все развиваются и растут вместе. Спасибо [поклон].
общаться вместе
- личныйрепозиторий github, если вам интересно, вы можете пометить [Сахуа]
- У вас есть хорошие идеи, чтобы поделиться,Подпишитесь на официальную учетную запись WeChat yhzg_gz (нажмите, чтобы скопировать, добавьте официальную учетную запись в WeChat и вставьте ее), стремление к качеству кода, эффективное программирование - наша общая цель.
ps: Совершенствуйся и встречай людей с разными устремлениями и гармонией.