предисловие
Этот год очень популярен для мини-программ, поэтому в последнее время я сам изучаю мини-программы WeChat, поэтому я планирую сам создать мини-программу, потому что я только что научился сам. Я сделал относительно простой мебельный апплет. Конечно, в этом также есть некоторые проблемы и ошибки, и я поделюсь с вами здесь, чтобы помочь большему количеству друзей. Если есть какие-либо недостатки, я надеюсь, что каждый может внести ценные предложения. Только так мы сможем расти и развиваться вместе.
Краткое введение в мини-программы WeChat
Как мы все знаем, по мере того, как в App Store появляется все больше и больше приложений, на мобильный телефон загружается больше приложений, что приводит к зависанию мобильного телефона, поэтому апплет WeChat в настоящее время освобожден. Пока пользователь сканирует или ищет, приложение может быть открыто, что сокращает количество загрузок приложения.
- Среда разработки: WXML (HTML), WXSS (CSS), Javascript
- Инструменты разработки: vscode, инструменты разработчика WeChat
- Процесс разработки: после загрузки инструмента разработчика WeChat у вас будет собственный AppID при регистрации, а апплет WeChat имеет официальную документацию по разработке апплета WeChat.документация по разработке
Далее, давайте поговорим о небольшой программе, которую я сделал.
Начало всего сложное, главное сделать первый шаг. Здесь я поделюсь своим процессом реализации и ямами, с которыми я столкнулся в реальном процессе. Первый взгляд на эффект домашней страницы
.img-box image{
width: 100%;
height: 100%;
}
.img-box image:after{
content: "";
position: absolute;
bottom: 0;
width: 100%;
color: #fff;
padding: 50px 20px;
}
1: Реализация карусельного эффекта мебели
Карусельная реализация апплета использует компонент swiper Контейнер представления ползунка имеет такие атрибуты, как индикаторные точки, автовоспроизведение, setinterval и т. д., которые могут устанавливать автовоспроизведение и временной интервал. Вставленные изображения можно зациклить с помощью wx:for.
wxml-код:
<swiper class="section "indicator-dots="{{true}}" autoplay="autoplay" setInterval="3000" duration="500">
<view class="img-box">
<block wx:for="{{slides}}" wx:key="id">
<swiper-item>
<image src="{{item.image}}" mode="aspectFill" />
</swiper-item>
</block>
</view>
</swiper>
我这里把图片放在了js里面遍历。效果如图所示
2: Проблема прыжка в навигации
После нажатия кнопки «Добавить в корзину» событие «Добавить привязку» должно было перейти на другую страницу, но оно не сработало или сообщило об ошибке. Я думал, что что-то не так с моим правописанием или путем, но после того, как я проверил, проблем не было. Наконец-то я наконец-то нашел яму. Страница, на которую нужно перейти, — это страница tabBar.Согласно переходу по умолчанию, это не разрешено.Проверив документацию по разработке, я обнаружил, что
3: Как контролировать количество купленных товаров и рассчитать цену после добавления товара в корзину
Первоначально я хотел щелкнуть изображение, чтобы ввести детали, а затем щелкнуть, чтобы добавить в корзину, чтобы сохранить ее в корзине в фоновом режиме.Однако из-за ограниченных знаний о самообучении бэкенд еще не научился, и я могу только добавить событие привязки для перехода в корзину.
selectList(e){
let selectAllStatus = this.data.selectAllStatus;
const index=e.currentTarget.dataset.index;
let carts=this.data.carts;
const selected=carts[index].selected;
carts[index].selected=!selected;
selectAllStatus = carts[index].selected;
// if( carts[index].selected=!selected){
// selectAllStatus:false;
// }
this.setData({
carts,
selectAllStatus,
});
this.getTotalPrice();
},
deleteList(e) {
const index = e.currentTarget.dataset.index;
let carts = this.data.carts;
carts.splice(index,1);
this.setData({
carts: carts
});
if(!carts.length){
this.setData({
hasList: false
});
}else{
this.getTotalPrice();
}
},
addCount (e){
const index = e.currentTarget.dataset.index;
let carts = this.data.carts;
let num = carts[index].num;
num++;
carts[index].num = num
this.setData({
carts
})
this.getTotalPrice();
},
minuCount(e){
const index = e.currentTarget.dataset.index;
let carts = this.data.carts;
let num = carts[index].num;
if(num<=1) return false;
num--;
carts[index].num = num
this.setData({
carts
});
this.getTotalPrice();
},
selectAll(e){
let selectAllStatus = this.data.selectAllStatus;
selectAllStatus = !selectAllStatus;
let carts =this.data.carts;
for(let i=0;i<carts.length;i++){
if( carts[i].selected=!selectAllStatus){
selectAllStatus:false
}
carts[i].selected=selectAllStatus;
}
this.setData({
carts,
selectAllStatus
})
this.getTotalPrice();
},
getTotalPrice(){
let carts = this.data.carts;
let total = 0;
for(let i =0;i<carts.length;i++){
// total += carts[i].num *carts[i].price;
if(carts[i].selected){
total+= carts[i].num * carts[i].price;
}
}
this.setData({
totalPrice:total.toFixed(2)
})
}
4: Как получить аватар и информацию пользователей, которые входят в WeChat
- 1. Используйте wx.getUserInfo, чтобы напрямую получить аватар и псевдоним WeChat.
- 2. Когда мы используем апплет wx.login API для входа в систему, мы не можем получить больше информации непосредственно с помощью wx.getUserInfo, например, openid пользователей WeChat. Я использую первый метод здесь wxml-код:
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
js-код:
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
общий эффект
наконец
Есть еще некоторые функции этого апплета, которые еще не реализованы, такие как корзина и проблема сохранения информации о пользователе в фоновом режиме.В будущем, когда я закончу самостоятельное изучение некоторых знаний о бэкэнде, у меня все еще есть чтобы сделать этот апплет полностью.Если вам это нравится, вы можете обратить на него внимание.Мой github, мы можем вместе учиться, вместе заниматься kiha, и надеюсь, что вы можете дать мне несколько ценных мнений
Исходный файл:github.com/duzuimoye/duzuimoye-xxf_fullstack/tree/master/duzuimoye-xxf_js_fullstack/wxapp/furniture С нетерпением жду вашей звезды и вилки
Это первый раз, когда пишу статью.Проект может быть не очень хорошим, и выражение может быть неясным.Пожалуйста, поощрите новичка, поставьте лайк и оставьте свои предложения.