Апплет WeChat
написать впереди
Прошло больше года с тех пор, как была выпущена мини-программа , и многие люди сходили с ума по пути мини-программы. Недавно я также начал изучать апплет.После обучения на некоторое время, я хотел увидеть эффект обучения в течение этого периода, поэтому я начал свой первый апплет во время обучения. Я считаю, что многие люди использовали Xiaohongshu, но я получил много хороших вещей, поэтому я подумал о написании апплета WeChat Xiaohongshu. Ниже я приведу вам несколько «ям» в процессе написания «Амвей».
Поскольку это не занимает много времени, есть много несовершенных функций, а страница не очень красивая, пожалуйста, взгляните. ╮(╯▽╰)╭
Готов к работе
- Среда разработки: WXML (HTML), WXSS (CSS), Javascript
- Инструменты разработки:vscode,Инструменты разработчика WeChat
- Вспомогательные инструменты:
- Markman: Инструмент аннотации значков, который можно использовать для выбора и измерения цвета.
- Easy-Mock: Вы можете подделывать поддельные данные, просто ссылаясь на них в js.кликните сюдаМожет просматривать данные моего проекта.
- Markdown: Онлайн-редактор
- GifCam: инструмент для записи GIF
- Документация по разработке программы WeChat Mini
- Библиотека векторных иконок Iconfont-Alibaba: Есть маленькие значки на все случаи жизни.
Возникли несколько проблем
1. Проведите пальцем влево и вправо на панели навигации главной страницы.
Изображение эффекта:
<scroll-view class="navBar-box" scroll-x="true" style="white-space: nowrap; display:flex ">
<view class="cate-list {{curIndex==index?'on':''}}" wx:for="{{category}}" wx:key="{{item.id}}" data-id="{{item.id}}" data-index="{{index}}" bindtap="switchCategory">
{{item.name}}
</view>
</scroll-view>
scroll-x="true" — установить горизонтальное скольжение, если вы хотите установить вертикальное скольжение, используйте scroll-y="true". Здесь следует отметить, что при использовании горизонтальной прокрутки нужно задавать фиксированную ширину, и аналогично вертикальной прокрутке требуется фиксированная высота. Каждому элементу списка навигации должна быть задана ширина, а общая ширина всех элементов должна быть меньше ширины прокрутки, иначе элементы списка будут располагаться вертикально. Поскольку количество элементов списка навигации относительно велико, здесь используетсяwx:forЦикл зацикливает элементы списка. Это значительно сокращает объем кода, что действительно хорошо φ(゜▽゜*)♪
Некоторые примечания по использованию прокрутки:
- Не используйте компоненты textarea, map, canvas, video в режиме прокрутки.
- scroll-in-view имеет более высокий приоритет, чем scroll-top
- При прокрутке прокрутки это предотвратит отскок страницы, поэтому прокрутка в прокрутке не может вызвать onPullDownRefresh
- Чтобы использовать pull-to-refresh, используйте прокрутку страницы вместо scroll-view, что также позволяет вам вернуться к началу страницы, щелкнув верхнюю строку состояния.
2. Список статей на главной странице меняется по щелчку списка на навигационной панели.
Изображение эффекта:
<swiper class="notes" current="{{toView}}">
<swiper-item class="category" wx:for="{{detail}}"
wx:key="{{item.id}}">
<scroll-view class="cate-box" id="{{item.id}}" scroll-y>
<-- 文章列表内容 -->
<view class="note" wx:for="{{item.notes}}" wx:for-item="notes" wx:key="{{index}}">
<view class="note-info">
<navigator url="../index/note-info/note-info" >
<view class="home-note-img">
<image src="{{notes.note_image}}"/>
</view>
<span>{{notes.title}}</span>
</navigator>
</view>
<!-- 作者信息 -->
<view class="note-handle">
<navigator class="writer" url="../index/note-writer/note-writer">
<image class="photo-img" src="{{notes.writer_img}}"/>
<span class="name">{{notes.writer}}</span>
</navigator>
<view class="like">
<image class="like-icon" src="/images/like.png"/>
<span>{{notes.like}}</span>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
Используйте компонент swiper для переноса всех списков статей, и каждый элемент swiper представляет отдельный модуль списка. Раньше каждый элемент списка на панели навигации был связан с другим значением, которое срабатывало при нажатии на кнопку навигации.switchCategoryСобытия, Swiper-Item отображает соответствующий список статей Item на основе различных значений, выбранных в навигации. Здесь я использую Easy-Mock, чтобы поместить в него данные страницы, а затем используюwx:requestПросто запросите данные.
// 请求数据
wx.request({
url: 'https://www.easy-mock.com/mock/5b1e17a0d4a14a3247a6cd6b/',
success: (res) => {
this.setData({
detail: res.data.data
})
}
})
пройти черезwx:forЦикл, чтобы получить содержимое каждой страницы статьи. Используйте прокрутку в swiper-item, чтобы сделать страницу прокручиваемой.
::-webkit-scrollbar{
height: 0;
width: 0;
color: transparent; // 透明
}
3. История страницы поиска
wx：forЦикл historyRecord, значение индекса различает различное содержимое поиска, а recordItem — это значение, которое будет выводиться в записи истории. код показывает, как показано ниже:
<view class="search-history">
<text class="history-record">历史记录</text>
<view class="search-history-item" wx:for="{{historyRecord}}" wx:key="{{index}}">
<text>{{item.recordItem}}</text>
</view>
</view>
Поскольку страница сведений о статье еще не написана, после ввода содержимого поиска и всплывающего аналогичного содержимого нажмите клавишу ввода, чтобы вызвать событие bindconfirm, используйтеwx.navigateToВернитесь прямо на страницу поиска, и ранее введенный поисковый контент будет добавлен в историю.
bindconfirm: function(e){
var recordItem = e.detail.value;
this.saveHistory({
id: 0,
recordItem
})
wx.navigateTo({ //跳转到搜索页面
url: '../searchbar/searchbar',
})
this.setData({
searchContext:''
})
},
4. Добавьте адрес доставки
picker: селектор прокрутки, всплывающий снизу, теперь поддерживает пять селекторов, которые различаются по режиму, а именно обычный селектор, селектор с несколькими столбцами, селектор времени, селектор даты, селектор провинции и города, по умолчанию используется обычный селектор. Некоторые из его свойств, нажмите, чтобы посмотретьpicker.
<!-- wxml -->
<picker bindchange="bindaddressChange" value="{{addressValue}}" range="{{addressRange}}">
<view class="weui-select weui-select_in-select-after" name="adress">{{addressRange[addressValue]}}</view>
// js 设置初始值
data: {
addressValue: 0, //地址下标
addressRange: ["北京市","江西省", "湖南省", "上海市","湖北省","浙江省", "福建省", "重庆市"],
},
</picker>
Но это место, проверка формы и добавление адресной информации в список адресов, на какое-то время доставило мне головную боль.
Во-первых, это проверка формы, которая запускается при отправке формы.formSubmitсобытие для проверки формы. Если содержимое не введено или формат входного содержимого неверен, передатьwx.showModal()Советы пользователям. код показывает, как показано ниже:
formSubmit: function(e){
var warn = "";
var that = this;
var flag = false;
if(!e.detail.value.name){ //判断输入内容
warn = "请填写收件人！";
} else if(!e.detail.value.tel){
warn = "请填写手机号码！";
} else if(!(/^1(3|4|5|7|8)\d{9}$/.test(e.detail.value.tel))){
warn = "手机号码格式不正确！";
} else if(!e.detail.value.adress){
warn = "请选择地区！";
} else if(!e.detail.value.doorAdress){
warn = "请填写详细地址！";
} else if(!e.detail.value.IDcard){
warn = "请填写身份证号码";
} else if(!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/).test(e.detail.value.IDcard)){
warn = "身份证号码格式不正确"
} else{
flag=true;
// 存储到全局变量adressInfo
app.globalData.adressInfo.push(e.detail.value);
wx.navigateTo({
url: '/pages/my/adress/adress'
})
}
if(flag==false){
wx.showModal({
title: '提示',
content:warn
})
}
},
Добавьте адресную информацию и отправьте ее в список адресов Как решить эту часть? Моя первоначальная идея состояла в том, чтобы хранить информацию о добавленном адресе локально, а затем получать информацию о добавленном адресе из списка адресов. Это должно быть упомянутоwx.setStorage( )а такжеwx.getStorage( )эти два метода.
wx.setStorage(): сохранение данных в указанном ключе в локальном кеше перезапишет исходное содержимое, соответствующее ключу.Это асинхронный интерфейс.
wx.getStorage(): асинхронно извлекает содержимое, соответствующее указанному ключу, из локального кеша.
wx:getStorage асинхронно получает содержимое, соответствующее указанному ключу, из локального кеша. Ключ указан, поэтому добавленный адрес перезапишет содержимое, соответствующее исходному ключу, так что эффект сохранения адреса получить нельзя, а данных будет только один.
//添加地址信息到本地缓存 add-adress.js
submitdate: function (event) {
var adressInfo = event.detail.value;
wx.setStorage({
key: 'adressInfo',
data: adressInfo,
success: function (res){
wx.navigateTo({
url: '/pages/my/adress/adress'
})
}
})
},
//地址列表里获取缓存在本地的地址信息 adress.js
var that=this;
wx.getStorage({
key:'adressInfo',
success:function(res){
console.log(res);
var adressInfo=[];
adressInfo.push(res.data);
that.setData({
adressInfo
})
}
})
于是呢，就去请教了几位大佬，看有什么方法可以解决这个问题。经过讨论，得出了解决办法：将添加的地址信息push到全局上去，然后再从全局里面获取，这样就不会将之前的数据覆盖。而且这样处理，代码量大大的减少了。 код показывает, как показано ниже:
// 定义globalData对应的全局变量 app.js
globalData: {
userInfo: null,
adressInfo:[]
}
// 提交地址信息，调用定义的变量 add-adress.js
submitdate: function (event) {
app.globalData.adressInfo.push(event.detail.value);
wx.navigateTo({
url: '/pages/my/adress/adress'
})
console.log(app.globalData.adressInfo);
},
//获取地址信息,调用定义的变量 adress.js
var that=this;
that.setData({
adressInfo:app.globalData.adressInfo
})
Примечание. Его необходимо инициализировать в начале файла, вызывающего глобальную переменную.appэтот объект
const app = getApp();
5. Внедрение интерфейса данных Easy-Mock
При использовании Easy-Mock для подделки данных необходимо написать спецификацию. «Яма», на которую я здесь наступил, это: имя атрибута данных, которое не может содержать «-» (например: note-image). Таким образом, хотя интерфейс данных может быть создан, при его импорте будет сообщено об ошибке, а импортированные данные будут пустыми. Имена атрибутов данных могут использовать «_» (например: note_image).
Суммировать
Выше я думаю, что проще упасть в яму и сложнее. Есть еще много незаконченных функций, и я буду постепенно улучшать их в будущем. Я все еще новичок в этом аспекте небольших программ.Я хотел бы дать предложение такому новичку, как я, в дополнение к чтениюДокументация по разработке программы WeChat MiniКроме того, вы также можете взглянуть на исходный код проекта апплета с открытым исходным кодом.Если вы столкнетесь с проблемой, вы можете увидеть, как ее решают другие. Каждое сообщество также является хорошей платформой для публикации проблем и их совместного решения.
Если в этой статье есть что-то плохое или лучшее, приветствуйте больших парней, чтобы они указали на них и вместе учились.
Эта статья является личным оригиналом, если вы хотите узнать больше о моем проекте, вы можете проверить мойИсходный код проекта. Надеюсь, эта статья была вам полезна, ставьте лайк и подписывайтесь~~