В последнее время я часто вздыхала: время всегда так быстро и быстротечно. Для такого новичка, как я, технология обновляется каждый день, а фреймворки появляются один за другим. Конечно, изучение хороших техник также очень важно. Но как я могу получить то, что я хочу после учебы? Хороший совет - успокоиться и написать что-нибудь о себе. Даже если вы не можете это закончить, вы должны постараться написать все возможное. Начальник однажды сказал, что вам нужно потренироваться и мыслить независимо. , вы можете освоить множество пунктов знаний, которые вроде бы понимаете, но с которыми трудно иметь дело. Прошло полмесяца с тех пор, как я начал изучать мини-программы, не так давно инцидент с Didi произвел фурор, поэтому я начал эту статью и открыл мини-программу Didi. Интерфейс сильно изменился.Мне ностальгирует,мне все равно нравится прежний интерфейс,поэтому решил написать ностальгическую версию апплета Didi сам.Далее перечислю подводные камни с которыми столкнулся и как их решить.Я надеюсь, это поможет вам, кто также борется...
предисловие
Если вы хотите делать хорошие вещи, вы должны сначала отточить свои инструменты.Что касается внешнего интерфейса, наличие хорошего инструмента может заставить нас делать больше с меньшими затратами. Чтобы сделать небольшую программу, мы должны сначала выбрать наше оружие.
- Оружие 1:Инструменты разработчика WeChat
- Оружие 2:VsCodeОчень приятно интегрировать терминал вместе, чтобы облегчить наше углубленное изучение апплета Wepy и Mpvue.
- Оружие 3:Easy MockС помощью этого веб-сайта мы можем быстро смоделировать нужные нам данные, что удобно и быстро. Нажмите здесь, чтобы увидеть мои данныеИнтерфейс данных
визуализация
Наговорив много, значит, я этого не говорил.Вернёмся к теме и сначала подойдем к волне динамичных картинок.Вот еще фотографии ждут вас
Подробная реализация функций
Далее я опишу основные функции апплета Didi WeChat, а также соответствующие интерфейсы данных и используемые компоненты/API-технологии. Давайте приблизимся к апплету, передадим знания и поделимся достижениями
Функция 1: домашняя страница
- Смоделируйте эффект загрузки времени ожидания, используйте концепцию компонентизации и создайте папку шаблона.
<template name="sprinner">
<block wx:if="{{isLoading}}">
<view class="spinner">
<view class="bounce1"></view>
<view class="bounce2"></view>
<view class="bounce3"></view>
</view>
</block>
</template>
Вы можете использовать его непосредственно там, где вам нужно использовать эффект загрузки.
<import src="/templates/sprinner.wxml" />
<template is="sprinner" data='{{isLoading}}'>
</template>
//通过去设置isLoading的布尔值来判断是否需要显示
- Головная навигация и щелчок могут определять направление выдвижения и автоматически выдвигаться, мы можем установить его с помощью атрибута scroll-left="{{navScrollLeft}}", нажмите навигацию, мы можем динамически изменить это значение, чтобы достичь этого эффект.
<scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
<block wx:for="{{navData}}" wx:for-index="id" wx:for-item="navItem" wx:key="index">
<view class="nav-item {{currentTab == id ?'active':''}}" data-name="{{navItem.name}}" data-current="{{id}}" bindtap="switchNav">{{navItem.name}}</view>
</block>
</scroll-view>
Как изменить значение этого navScrollLeft? Первой мыслью было поставить левее нав навигации, а потом скрывать, если выходит за пределы. Пит, это вообще невозможно. Я не могу судить, выскальзывает ли он или снова выскальзывает, и позже я подумал о том, чтобы установить порог. Усталость действительно трудно писать. Вроде отказались, будем придерживаться, вот и подумал взять и написать их js отдельно.
switchNav(e){
var cur = e.currentTarget.dataset.current;
var singleNavWidth = this.data.windowWindth/4; //获取屏幕宽度存放放四个nav，
this.setData({
navScrollLeft: (cur - 1) * singleNavWidth, //点击去减少每一个nav的值
currentTab: cur,
})
switchTab(e){
var cur = event.detail.current;
var singleNavWidth =55; //设置每一个nav的宽度
this.setData({
currentTab: cur,
navScrollLeft: (cur - 1) * singleNavWidth //同样动态的去改变这个值
});
},
Это первый раз, когда вы позаботились о такой маленькой программе с эффектом верхней навигации, но у нее также есть небольшой особый эффект. Если вы столкнетесь с этим в будущем, вы можете вернуться и извлечь из этого уроки, чтобы не тратить здесь много времени и энергии, как я. Мы программисты, которые хотят использовать эффективное время для создания большей ценности...
Функция 2: Выбор исходного положения
Чтобы добиться такого эффекта, я перечитывал документ n раз снова и снова, что на самом деле довольно сложно.API апплета WeChatКарта действительно не очень детализирована.Может быть кто-то вроде меня естественно заморочился с обработкой карты. Здесь я подробно перечислю проблемы, с которыми я столкнулся, и я надеюсь, что это также поможет вам справиться с такими вещами, как карты в будущем.
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');//导入需要使用的包，创建一个libs文件夹
var qqmapsdk;
qqmapsdk = new QQMapWX({
key:'DHNBZ-2ZLKK-T7IJJ-AXSQW-WX5L6-A6xxxx'//申请自己的开发者密钥
});
qqmapsdk.reverseGeocoder({ //逆地址解析api，可以根据你的经纬度去解析位置地址
location: {
latitude: latitude,
longitude: longitude,
},
success: function (res) {
conslog.log(res)
}
Первая яма: Как получить широту и долготу, и двигать маркеры? Боже мой, сколько это надо писать? Для больших коров это может быть минута за минутой, но это все еще довольно сложно для новички. После долгих размышлений я вдруг обнаружил, что this.mapCtx.getCenterLocation, событие мобильной карты получает широту и долготу центра карты. Затем мы можем зафиксировать элемент управления в центре карты, переместить карту, чтобы проанализировать ее положение координат, и привязать данные, которые будут отображаться ниже, чтобы это было реализовано. код emmm выглядит следующим образом
bindregionchange: function(e){ //移动地图事件
var that = this
this.mapCtx.getCenterLocation({ //getCenterLocation可以获取地图中点的经纬度
success: function (res) {
app.globalData.strLatitude=res.latitude //存放到全局去，供后面计算价格使用
app.globalData.strLongitude= res.longitude
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude, //通过移动地图可以得到相应中心点的经纬度
longitude: res.longitude,
},
success: function (res) {
that.setData({
address: res.result.address, //得到的经纬度逆地址解析得到我们的位置信息
bluraddress: res.result.formatted_addresses.recommend
})
},
});
Вторая ямка: функцию подсказки поиска можно реализовать, вызвав API в пункте назначения, но мне нужно, чтобы запись истории существовала, и когда я щелкаю элемент, мне нужно перейти на домашнюю страницу, чтобы отобразить его. страница без истории крайне бедна. ли? вот так делаю
qqmapsdk.getSuggestion({ //调用api实现关键词搜索提示
keyword: value, //传递input的值，这里要传value不是'value',刚开始犯困。提示一下
region: '南昌',
success: function(res){
let data = res.data
that.setData({
address: data,
value
})
<view wx:if="{{!value==''}}" class="destination" wx:for="{{address}}" data-destination="{{item.title}}" data-end="{{item.address}}" bindtap="toIndex" wx:key="{{item.id}}">
<view wx:if="{{value==''}}" class="destination" wx:for="{{ entity}}" data-destination="{{item.title}}" data-end="{{item.address}}" bindtap="toIndex" wx:key="{{item.id}}">
Используйте wx:if для оценки поля ввода. Следующие для разных массивов заполните первую небольшую ямку. Далее мы подумаем над этим, как мы добавим его в нашу историю, когда мы нажмем на поиск? Нажмите, чтобы получить id этого значения и поместите его в массив истории. Разве не приятно реализовать выбор начальной позиции Didi? Конечно, это верхушка айсберга, и нам еще нужно исследовать то, что позади сила.
Функция 3: Расчет расходов
Древние говорили: "Детали определяют успех или неудачу. Хороший апплет WeChat часто состоит из нескольких деталей, которые трогают сердца людей. На самом деле это имитация. Хотя это не может быть на 100 %, по крайней мере, я надеюсь, что это точно то же самое".
<repeat wx:if="{{callCart}}">
<repeat wx:else>
используется для расчета ценыAPI карты TencentПолучите расстояние между двумя точками, просто сохраните начальные точки в globalData, преимущество этого в том, что вы можете получить данные внутри в любое время
let {endLatitude,endLongitude} = app.globalData //使用ES6的语法去结构数据
qqmapsdk.calculateDistance({
mode: 'driving',
to:[ {
latitude: endLatitude,
longitude:endLongitude
}],
success: (res)=> {
var num1 = 8+1.9*(res.result.elements[0].distance/1000)
var play1 = num1.toFixed(1) //取一位小数点
app.globalData.play= play1 //同样存放在全局里，后面订单结束支付要用上
this.setData({
play1:play1,
})
},
Состояние перехода, отображаемое по клику, здесь подробно не описывается, и в этой статье рассматриваются лишь некоторые проблемы, с которыми непросто справиться. Позже при планировании маршрута на странице обслуживания водителя также вызывается API для расчета широты и долготы двух точек, которые необходимо отметить и соединить. Здесь он опущен, и детали могут бытьобратитесь к моему коду.
Функция 4: дождаться прогресса
<canvas class="progress_bg" canvas-id="canvasProgressbg"> </canvas> //画底色
<canvas class="progress_canvas" canvas-id="canvasProgress"> </canvas> //画进度条，传递一个step参数，用定时器去绘制
Третья яма: с отрисовкой канвы проблем нет, и документация очень подробная, но как сделать таймер внутри? Все, что мне нужно, это минуты, а не обратный отсчет, и быть в соответствии с внешним миром. Передняя часть такая грустная? А, сожми пулю и напиши. Я искал ресурсы и обнаружил, что информации в Интернете действительно мало. Нет возможности, баг еще надо решить. Вы тоже сталкивались с такой проблемой, или в будущем! Не забудь вернуться ко мне...
parseTime: function(time){ // 这里参考了每个小程序项目中自带的utils下的util.js，大牛写的就是简洁明了
var time = time.toString();
return time[1]?time:'0'+time; //自动归零补零
},
countInterval: function () {
var curr = 0;
this.setData({
time: this.parseTime(timer.getMinutes())+":"+this.parseTime(timer.getSeconds()), //格式化下时间，取分秒
});
timer.setMinutes(curr/60); //秒针60了自动加1
timer.setSeconds(curr%60); //60后归零
curr++;
}
Для синхронизации он должен быть очень простым, и его достаточно поставить в таймер.кликните сюдаПосмотреть исходный код
Функция 5: отменить поездку
Если есть такси, то должна быть отмена, верно? Это немного непонятно, когда вы смотрите на страницу маршрута отмены. Нужно ли писать эти стили самому? Чтобы научиться говорить нет, вот пример того, как я использую weui для быстрого создания эффекта страницы в начале апплета.
Вот некоторая информация, которая, на мой взгляд, уместна: Примеры, которые можно использовать непосредственно в небольших программах.Официальная документация апплета Weui, Следует отметить, что для обращения к weui необходимо обратиться к его css в соответствующей папке или глобальному wxss, который может использоваться несколькими страницами, вот глобальная ссылка
@import 'styles/weui.wxss';
Вы можете начать свое путешествие по Weui, сославшись на этот код в app.wxss, Публиковать такой длинный фрагмент кода довольно многословно. Это означает, что вы собираетесь использовать weui для быстрой разработки вашего апплета!
<view class="weui-cells weui-cells_after-title"> //使用weui可以直接复制套上去用就好了
<checkbox-group bindchange="bindReasonChange">
<label class="weui-cell weui-check__label" wx:for="{{reasons}}" wx:key="value">
<checkbox class="weui-check" value="{{item.value}}"checked="{{item.checked}}"/>
<view class="weui-cell__bd name" >{{item.name}}</view>
<view wx:if="{{item.checked}}" class="checked "> //点击是显示红色的√
<image src="../../assets/images/checked.png"></image>
</view>
<view wx:if="{{!item.checked}}" class="checked "> //不点击是显示空圆
<image src="../../assets/images/nochecked.png"></image>
</view>
</label>
</checkbox-group>
<view class="weui-cell weui-cell_link {{show==true?hidden:''}}">
<view class="weui-cell__bd moreReasons" style="display: {{show==true?'none':''}};"bindtap='moreReasons'>
<text>点击查看更多原因</text>
</view>
</view>
</view>
Опыт добычи на карьере: как решить проблему кликового перехода? Это то, о чем я подумал сначала: используйте значок, чтобы показать различные переходы, изменив его проверенное событие. Это достижимо, но вы можете щелкнуть только один, а не несколько вариантов. Боль! ! Все утро ворочался, боролся мозгами. После многократного прочтения документа я, наконец, понял, что могу использовать несколько циклов для проверки. Эй, js по-прежнему очень важен. Адо
bindReasonChange(e){
let reasons = this.data.reasons;
let strVal = e.detail.value;
for(var i = 0, lenI = reasons.length; i < lenI; ++i){
reasons[i].checked = false;
for(var j = 0, lenJ = strVal.length; j < lenJ; ++j){
if(reasons[i].value==strVal[j]){
reasons[i].checked =true;
break;
}
}
}
В будущем на нашу страницу может понадобиться клик для выбора функции более-менее.На самом деле принцип аналогичен.У вас есть этот момент?Можете использовать его,когда будете делать эту функцию в будущем. Всегда кажется, что есть еще что-то незаконченное: Ладно! !
Делая клик, чтобы загрузить больше, вот как я это делаю. wx: для массива, а затем перехватить его нижний дисплей. Нажмите, чтобы загрузить все для этого массива. Затем используйте таймер, чтобы установить wx.showLoading(), чтобы показать загрузку большего количества эффектов, и у вас есть это чувство зрения.
Функция 5: Рейтинг водителей Didi
Наслаждались скоростью и удобством Didi и вздыхали, что технологии изменили жизнь. Этот же рейтинг является и прямым источником итоговых отзывов о приложении от пользователей, так что мы не можем упустить такой важный момент, но детали управления тоже очень сильно размазаны.
<view class="evaluation-stars" bindtap="myStarChoose">
<block wx:for="{{starMap}}"wx:key="{{index}}">
<text wx:if="{{star>=index+1}}" class="stars-solid" data-star="{{index+1}}">★</text>
<text wx:if="{{star<index+1}}" class="stars-empty" data-star="{{index+1}}">☆</text>
</block>
</view>
<text class="zan-c-gray-dark">{{starMap[star-1]}}</text>
Вместо картинок для решения этой задачи гораздо удобнее использовать шрифты, просто меняйте цвет, чтобы добиться эффекта подсчета очков. И количество кода очень маленькое, не знаю, убьют ли это.
myStarChoose(e) {
let star = parseInt(e.target.dataset.star) || 0;
this.setData({
star //名字一样可以省略
});
},
последняя точка
Подводя итог, это должно быть особенно важным пунктом знаний.Для вас, кто разрабатывает, это полезнее, чем описание вышеперечисленных функций, или вы уже знаете и лучше справляетесь с этим.Это только в помощь тем, кто следуйте за мной.Те же маленькие студенты, которые только что вышли на рынок, должны стараться избегать обходных путей, насколько это возможно.
- 1. Инкапсуляция запросов данных является предпосылкой создания хорошей программы. В апплете нам не нужно постоянно запрашивать данные. Нам очень тяжело иметь дело с асинхронными запросами везде. Это требует больше времени, чтобы позаботиться об этом.По мере постепенной популяризации es6 мы также должны использовать эти хорошие вещи в нашем коде, чтобы обещать и синхронизировать асинхронное программирование. рекомендоватьСтатья учителя Ляо Сюэфэна, выложите мой пакет, и вы сможете его скопировать и использовать в дальнейшем.
let util = {
request(opt){
// 生成对象 结构
let options = Object.assign({},,opt); //es6的赋值
let {url,data,} = options //es6的结构从options结构出我们需要的url，data
return new Promise((resolve,reject)=>{
wx.request({
url,
data,
success(res){
resolve(res.data)
},
fail(err){
reject(err)
}
})
})
}
}
export default util //向外输出模板，在外面可以直接使用util.request({})去网上请求我们的数据的数据了。
- 2. Есть также некоторое управление пакетами, например, извлечение тех же элементов на нашей странице для создания папки шаблона, извлечение некоторых из тех же элементов wxss для создания нового стиля и @import там, где это необходимо. Например, кнопки Didi, по сути, те же самые, а горизонтальные полосы внизу страницы могут быть инкапсулированы, и вы можете напрямую импортировать их при использовании.
сообщение
Быть программистом непросто, а фронтенд-программистом еще сложнее. Технологии меняются каждый день. Трудно каждый день читать больше технических источников с тысячей слов в сердце. Но мы все люди, которые хотят поделиться. Мы можем записать проблемы, с которыми мы сталкиваемся, и способы их решения. Мы всегда надеемся, что это может помочь больше вам, мне и тому, кто также сталкивается с такими проблемами. Или это сила сообщества, это качество хорошего программиста. Изучение небольших программ еще нужно усиленно изучать.Нас ждут новые технологии такие как wepy и Mpvue.Я уже отправился в путешествие по этой территории,и проблемы,баги и себя тоже буду публиковать в будущем с работой. Надеемся помочь вам, наш лозунг - делиться, создавать. Начнем новое путешествие! ! !