последнее обновление:
Два проекта с открытым исходным кодом, которые я разработал с помощью Mini Program Cloud, могут быть форкнуты, если это необходимо. Если вам это нравится, пожалуйста, поставьте звезду.
Отказ от ответственности: я тоже новичок.Если письмо плохое, большие ребята дают указатели.
WeChat Mini Program Mall постоянно обновляется. (Уже уволился, но все еще небольшой программный проект/прищур)
Давайте сначала поговорим о происхождении написания небольших программ.Большой парень, которого я знал раньше, написал относительно простой апплет.Я изменил стиль и успешно получил свой первый апплет. Потом, когда искал работу, в резюме написал что-то подобное.После того, как я пришел, руководитель на полном серьезе сказал мне, что в компании Mini Program Mall вас научат. Дело в том, что никто в компании не знает WeChat Mini. Программы. WTF, разве ты не нанял меня, чтобы написать о VUE?
Поэтому я начал писать торговый центр апплета WeChat с нуля.
Про официальную документацию апплета WeChat ничего не скажу, там точно есть на что посмотреть. Расскажите мне о проблемах, с которыми я столкнулся с тех пор, как начал писать в эти дни. Я надеюсь, что это поможет вам, кто собирается писать небольшие программы, потому что я тоже очень хорош.
1. rpx апплета WeChat
В официальном документе WeChat мы видим это предложение:
На iPhone 6 с шириной экрана 375 пикселей и общим размером 750 физических пикселей 750 rpx = 375 пикселей = 750 физических пикселей и 1 rpx = 0,5 пикселя = 1 физический пиксель. Дизайнеры могут использовать iPhone 6 в качестве стандарта для макетов при разработке мини-программ WeChat. Другими словами, когда дизайнеры разрабатывают небольшие программы, они могут делать следующее:
- Непосредственно используйте размер экрана iPhone 6 (375 × 667) в качестве размера макета, 1 пиксель = 0,5 rpx;
- Установите размер эскиза дизайна на 750×1334 со стандартом 1 пиксель = 1 rpx.
На самом деле вообще можно поговорить с Мисс Уи, и тогда стиль можно очень круто написать.
2. Контейнерный вид апплета WeChat
- view на самом деле является div, хе-хе-хе, такое простое и грубое объяснение.
- scroll-view Прокручиваемая область просмотра. Предостережение для этого заключается в том, что область просмотра прокручивается по горизонтали. Важно то, что эти два встроенных стиля четко указаны и в других официальных документах.
3. UI-фреймворк апплета WeChat
Это очень интересно.Когда я закончил писать вкладку, которую я считал очень духовной, мой старый друг сказал мне, что у апплета WeChat есть структура, которую вы можете посмотреть. . .
{{item.name}}
Нет ББ, идите сразу по адресуGitHub.com/Tencent/Мой ЕС…
Сначала я написал это здесь.Я написал это во время обеденного перерыва сверхурочной работы в субботу, рискуя быть убитым при этом.Если что-то не так с написанием, пожалуйста, потерпите меня, и я также поделюсь проблемами Я столкнулся.
Недавно я увидел понравившийся мне интерфейс апплета WeChat, или старые правила идут прямо по адресу:
4, апплет WeChat SwitchTab
Переход на страницу Вы можете использовать навигатор, который вы видите на официальном сайте.Сегодня я поделюсь проблемой перехода на страницу, с которой я столкнулся в апплете. Я написал апплет для электронной коммерции. После перехода на страницу сведений есть два значка, которые нужно щелкнуть и перейти, как показано на рисунке:
Смарт, вы должны угадать, куда переходят эти две иконки, это должен быть bindtap, а затем это сделает wx.navigator. Два простых перехода по страницам, а потом эти две проблемы на самом деле застряли у меня больше чем на час, а потом я решил их, попросив больших парней в группе WeChat, потому что я не внимательно читал документы, и я перепрыгнул к этим двум Страница — это путь к официальной нижней вкладке WeChat, как показано на рисунке:
Проблема в том, что вы используете эти пути на официальной вкладке, как показано на рисунке:
Тогда решение:
handleGoIndex: function() {
wx.switchTab({
url: '/pages/index/index'
})
},
handleGoCart: function() {
wx.switchTab({
url: '/pages/cart/index'
})
}
5. Запрещенное выпадающее меню апплета WeChat
Иногда вы сталкиваетесь со страницей, которая не позволяет вытягивать страницу.Если вы думаете, что я говорю об API для вытягивающего обновления, это шаблон. Это сделано для того, чтобы белая полоса не появлялась при скольжении вниз. Перейдите непосредственно к коду:
stopDrag(){ return false; },Но используйте это с осторожностью. Я также думаю, что было бы лучше, если бы здесь был великий бог, который мог бы давать указатели. В результате все видимые области скользят статически... Домашняя страница апплета Pinduoduo не появится при этом. вниз белая полоса, но вы можете провести пальцем, чтобы увидеть информацию о продукте, спросить совета ~
Последнее решение в приложении. Добавьте это свойство в json, чтобы отключить прокрутку.
6. Глубина страницы апплета WeChat
При тестировании собственного проекта я обнаружил, что с логикой и грамматикой проблем нет. Я вдруг вспомнил, что стек страниц апплета равен пяти, поэтому я посчитал свои переходы по страницам во втором, ха-ха... Только тогда я понял, что мое понимание было неправильным в то время.Я не внимательно прочитал документ в сначала я думал, что эти пять Если страницы больше пяти, в стек страниц будут добавляться новые, а первая открытая уничтожается. Я просто использовал wx.navigateTo без мозгов.Столкнувшись с этой проблемой, я использовал wx.redirectTo для ее решения. Но кто заставил меня стремиться учиться, поэтому я обнаружил, что великий бог написал особенно совершенное понимание принципа перехода по страницам в небольших программах.
(Сейчас глубина стала 10 слоёв, но под некоторыми системами ios 10 до сих пор есть баги, и надо учитывать сцену глубины страницы.)
Еще хехе:Страница апплета «Основы маршрутизации» - небольшая программа микроканала Club www.wxappclub.com.
7. Вытяните загрузку апплета WeChat
Текущий проект моей компании представляет собой апплет электронной коммерции, раскрывающийся для обновления, и на официальном веб-сайте четко указано, что его нельзя использовать одновременно с просмотром прокрутки. Я использую bindscrolltolower как для onReachBottom, так и для прокрутки с моим мозгом. После моей практики всем рекомендую использовать onReachBottom. Если некоторые вкладки также имеют раскрывающееся обновление, это очень удобно для прямого кода:
onReachBottom() {
let isPush = this.data.index,
val = this.data.inputVal;
this.setData({
isBtnShow: true
});
if (isPush ==1) {
let num = this.data.limitIndex;
this.setData({
limitIndex: num+1
})
//关于上拉加载的性能优化
setTimeout(()=>{
// 给后端传下拉刷新的次数+1
const data = {
limitIndex: this.data.limitIndex
};
utils.sendRequest(api.AllGoodsUrl, data, this.handleReachBottom.bind(this));
},1500)
};
if (val != '') {
setTimeout(()=>{
let num = this.data.limitIndex;
this.setData({
limitIndex: num+1
})
// 给后端传下拉刷新的次数+1
const data = {
limitIndex: this.data.limitIndex,
data:{
name: this.data.inputVal,
}
};
utils.sendRequest(api.AllGoodsUrl, data, this.handleLoadMore.bind(this));
},1500)
};
},
这段代码主要就是判断tab的状态来延时请求接口。实现效果如下图：
Это моя практика использования нагрузки подтягиваниями. Надеюсь, кто-то может предложить лучшие варианты.
8. Взаимодействие данных апплета WeChat
Кстати говоря, я хотел бы поделиться своим опытом взаимодействия с данными.
function sendRequest(path, data, callback) {
wx.request({
url: path,
data: data,
header: {
'content-type': 'application/json'
},
method: "POST",
success: callback,
fail:(res)=>{
console.log(res)
}
})
} 把微信请求封装起来
还有项目里面要用到的接口如下
//promise 方式
function promiseRequest(url, data = {}) {
return new Promise(function (resolve, reject) {
wx.request({
url: url,
data: data,
method: 'POST',
header: {
'Content-Type': 'application/json',
},
success:(res) => {
if (res.statusCode == 200) {
resolve(res);
} else {
reject(res.errMsg);
}
},
fail: (err) => {
reject(err)
console.log("failed")
}
})
});
}
新增 promise 请求方式
//没有参数就传空
utils.promiseRequest(api.BannerUrl).then(res => {
if(res.data.error == 0){
//dosomething。。。
}else {
utils.showModal(res.data.err_msg)
}
});
Выставить интерфейс для вызова на других страницах
Я надеюсь, что есть большой Бог, чтобы помочь компонентам микрографа лучшую практику ~
9. Ошибка Android-запроса апплета WeChat
Ситуация, с которой я столкнулся в то время, заключалась в том, что не было проблем с запросом данных в симуляторе и среде IOS.При тестировании среды Android я обнаружил, что запрос не выполнен, как показано ниже.
Эта ошибка также заставила меня долго расставаться со старшим братом по эксплуатации и обслуживанию, ха-ха.Первое, что произошло, это ошибка, брат, этот горшок можно полностью свалить на старшего брата по эксплуатации и обслуживанию, не покидая любое помещение для него. Затем вы можете помочь старшему брату предоставить некоторую информацию, проверить шаг за шагом, сначала проверьте доменное имя, привязанное к вашему проекту:
1. проблема с сертификатом https: в конфигурации сертификата ssl необходимо использовать pem вместо crt,
2. Информация о версии на стороне сервера: проблема версии TLS, которая была упомянута в официальном документе программы WeChat Mini, версия TLS сервера должна поддерживать 1.2 (включить 1.2, отключить 1.1 и 1.0 и другие более низкие версии),
3. Говорят, что первые два метода решаемы после проверки данных, но для нашей компании, после проверки первых двух, брат по эксплуатации и обслуживанию перенаправил его с помощью Nginx и решил проблему сбоя запроса Android. Надеюсь, это поможет вам~
10. Трехуровневая привязка адресной страницы апплета WeChat
Говоря об этой проблеме, выложу адрес для всех, большое спасибо за опенсорс:blog.CSDN.net/День мертвых_17775…
После того, как вы сможете увидеть код, сначала уточните внутренние данные, которые вы хотите обработать, а также требования к хранению адресов и т. Д. Проблема, с которой я столкнулся, заключается в следующем.
Данные, предоставленные мне серверной частью, содержат идентификатор, соответствующий каждому адресу, например Пекин: 2 Пекин: 50 Район Дунчэн: 500
При обработке этих данных я сделал некоторые модификации на основе исходного кода Великого Бога,
let val = e.detail.value,
t = this.data.values,
cityData = this.data.cityData,
index = this.data.id,
list = this.data.addrList;
list[index].area = true;
try {
if (val[0] != t[0]) { //当val是选择省份的时候
const citys = [];
const countys = [];
cityData[val[0]].child.map(item => citys.push({name:item.name,id:item.id}));
cityData[val[0]].child[0].child.map(item => countys.push({name:item.name,id:item.id}));
list[index].provinceName = this.data.provinces[val[0]].name;//省份
list[index].cityName = cityData[val[0]].child[0].name;//城市
list[index].districtName = cityData[val[0]].child[0].child[0].name;//地区
list[index].province = this.data.provinces[val[0]].id;//对应的传值ID
list[index].city = cityData[val[0]].child[0].id;//对应的传值ID
list[index].district = cityData[val[0]].child[0].child[0].id;//对应的传值ID
this.setData({
citys: citys,
countys: countys,
values: val,
value: [val[0], 0, 0],
addrList: list
})
return;
}
if (val[1] != t[1]) {//当val是选择城市的时候
const countys = [];
cityData[val[0]].child[val[1]].child.map(item => countys.push({name:item.name,id:item.id}));
list[index].cityName = this.data.citys[val[1]].name;// 选择城市
list[index].city = this.data.citys[val[1]].id;//对应的传值ID
list[index].districtName = cityData[val[0]].child[val[1]].child[0].name;//选择城市对应的地区
list[index].district = cityData[val[0]].child[val[1]].child[0].id;//对应的传值ID
this.setData({
countys: countys,
values: val,
value: [val[0], val[1], 0],
addrList: list
})
return;
}
if (val[2] != t[2]) {//当val是选择地区的时候
list[index].districtName = this.data.countys[val[2]].name;//选择地区
list[index].district = this.data.countys[val[2]].id;//对应的传值ID
this.setData({
county: this.data.countys[val[2]].name,
values: val,
addrList: list
})
return;
}
} catch(e) {
// statements
console.log(e);
}
list里面是有 收货人，电话，等等信息 但是我只操作改变数组里面地址改变的信息，
Место, в котором нужно внести некоторые изменения в макет, это
Я разместил так много фотографий, потому что я действительно не знаю, как это сказать.Мне потребовалось два дня, чтобы настроить эту страницу. Я могу дать только общее направление, но мне еще нужно обработать данные шаг за шагом, удачи~
11. Горизонтальная прокрутка в среде Android апплета WeChat
<view class="tab bg">
<scroll-view class="" scroll-x="true" style="width: 100%;white-space: nowrap; display: flex;overflow-x: auto;">
<view style="display: inline-block" bindtap="switchIndex" class="tab-list {{index === 1 ?'on':''}}">首页</view>
<view wx:for="{{tab}}" wx:key="index" data-id="{{item.id}}" data-index="{{index}}"
style="display: inline-block" bindtap="switchTab" class="tab-list {{tabIndex === index?'on':''}}">
{{item.nav_name}}
</view>
</scroll-view>
</view>
代码一贴其实当测试小哥告诉你安卓tab不能滑的时候，你只需要加一个overflow-x: auto;哈哈哈
12. Проблема воспроизведения mp4 в среде iOS апплета WeChat
Когда вы сталкиваетесь с тем, что некоторые из ваших форматов mp4 могут воспроизводиться, а некоторые — нет, вам нужно только посмотреть на свой формат кодировки mp4, который должен быть в формате h264.
13. Яма оплаты WeChat в апплете WeChat
Потому что это первый раз, когда я пишу небольшие программы. Ну, бэкэнд Большого Брата, в торговом центре H5 добились того, что когда-то, и говорят, все виды не-нет проблем, просто выложил две цифры, сначала поймут
Все данные в этом API вернулись к вам, не принимайте его проволочки, ха-ха.
Кроме того, мы должны позволить бэкэнд читать платежные документы WeChat.Как правило, торговый центр компании является версией платежного сервиса для поставщиков услуг., и тогда все виды аргументов не имеют смысла. . .
Перейдите сюда, чтобы настроить его, интерфейсу нужно только настроить API и передать значение.
14. Загрузка изображения апплета WeChat
Он давно не обновлялся, и я был ошеломлен работой компании.
Старые правила, переходим непосредственно к коду.
handleCancelPic() {
let id = this.data.dbId;
wx.chooseImage({
count: 3, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: res => {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
this.setData({
src: tempFilePaths
})
upload(this,tempFilePaths,'','');
}
})
}
然后一个封装好的方法
function upload(page, path,way,id) {
console.log(path)
wx.showToast({
icon: "loading",
title: "正在上传"
});
var test = [],
that = this;
for (var i = 0; i<path.length; i++) {
wx.uploadFile({
url: api.CancelImg,
filePath: path[i],
name: 'file',
header: { "Content-Type": "multipart/form-data" },
success: res => {
test.push(res);
wx.setStorageSync('cancelImg',test)
console.log(test)
if (res.statusCode != 200) {
wx.showModal({
title: '提示',
content: '上传失败',
showCancel: false
})
return;
}else {
wx.showModal({
title: '提示',
content: '上传成功',
showCancel: false
})
}
},
fail: function (e) {
console.log(e);
wx.showModal({
title: '提示',
content: '上传失败',
showCancel: false
})
},
complete: function () {
wx.hideToast(); //隐藏Toast
}
})
}
这个是多个图片上传的方法，单个图片上传的话，把循环去掉就好。主要是因为微信官方默认的就是一次上传一张图片这个很蛋疼。只能这么搞了。。。
15. Логика электронной коммерции в апплете WeChat
Далее я поделюсь с вами логической обработкой выбора всех корзин в мини программах.Это все еще спасибо моей старшей сестре, которая научила меня, что разработчик должен быть строгим в том, что он делает.Каким бы уродливым ни был дизайн UI у вас должна быть логика.
Первое, что нам нужно сделать, это когда пользователь щелкает третий элемент, кнопка «Выбрать все» автоматически выбирается, или после выбора всех, пока один элемент не выбран, кнопка «Выбрать все» также должна быть изменена. Давайте сначала посмотрим на код:
Вам нужно определить некоторые данные, которые вам нужно отображать каждый раз, когда страница загружается.
data: {
likeList: [],
carts:[], // 购物车列表
hasList:false, // 列表是否有数据
//totalPrice:0, // 总价，初始为0
selectAllStatus:false, // 全选状态，默认全选,
goodsNums:0,
allclick:[]
}
每件商品单个选中的的逻辑处理
selectList(e) {
const index = e.currentTarget.dataset.index;// 获取每一个点击的购物车ID
let carts = this.data.carts,
selected = carts[index].select,
all = this.data.allclick;
carts[index].select = !selected;
carts[index].select == true ? all.push(index):all.splice(index,1);
all.length == carts.length ?
this.setData({
selectAllStatus: true
}):this.setData({
selectAllStatus: false
});
this.getTotalPrice();
},
上面的代码，先做的就是单选的页面渲染效果。判断部分的代码就是最主要的处理全选逻辑的一步。相信你看到这里也注意到我在data里定义了一个allclick的空数组，然后就是接下来的逻辑：
- При выборе кнопки вынимаю угловую метку соответствующего элемента и помещаю в новый обр.Здесь, поскольку логика моего предыдущего поселения была сделана, я просто запихиваю данные в массив, но на самом деле это может быть используется в качестве более важной обработки данных для соответствующего продукта.
- Если кнопка не выбрана, то найти данные, соответствующие индексу этого пункта в новом обр, и удалить его
- После выполнения двух вышеуказанных шагов каждый раз, когда изменяется состояние кнопки, оценивается длина арра и длина тележки.
Это моя обработка, и она также может быть переработана.Есть много способов добиться этого, но я просто беру ее и даю друзьям, которые не контактировали с ней, в качестве эталона~
data: {
likeList: [],
carts:[], // 购物车列表
hasList:false, // 列表是否有数据
//totalPrice:0, // 总价，初始为0
selectAllStatus:false, // 全选状态，默认全选,
goodsNums:0,
allclick:[]
}
每件商品单个选中的的逻辑处理
selectList(e) {
const index = e.currentTarget.dataset.index;// 获取每一个点击的购物车ID
let carts = this.data.carts,
selected = carts[index].select,
all = this.data.allclick;
carts[index].select = !selected;
carts[index].select == true ? all.push(index):all.splice(index,1);
all.length == carts.length ?
this.setData({
selectAllStatus: true
}):this.setData({
selectAllStatus: false
});
this.getTotalPrice();
},
这段代码也还是先处理全选的状态，然后就是关联状态的处理，
- Когда флажок «Выбрать все» не установлен, измените все кнопки в информации о продукте на false и напрямую очистите массив allclick.
- Когда все выборы проверены, все кнопки в информации о продукте изменяются на истинные, сначала очищаются, затем повторно нажимаются, а затем назначаются значения.
После этих нескольких шагов вся логика выбора всего была решена.Если вы считаете, что это полезно, не забудьте прокомментировать и обратить внимание~
16. Использование объектов карты в апплете WeChat
Это то, о чем мне говорил мой мастер Лян.Я маленькая программа, она Андроид, и проект такой же. У нас хорошие отношения, а потом она научила меня использовать этот объект Map, который на самом деле является объектом карты Java. Это действительно круто в использовании, никакой ерунды, просто перейдите к коду.
Это также представило объект Map в стандарте es6. Возьмем отрывок из книги Руан Дашена:
JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
const data = {};
const element = document.getElementById('myDiv');
data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"
上面代码原意是将一个 DOM 节点作为对象data的键，但是由于对象只接受字符串作为键名，所以element被自动转为字符串[object HTMLDivElement]。
为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。
Заинтересованные друзья могут двигатьсяНачало работы с набором карт es6
let localMap = new Map(),// 定义一个全局的MAP对象
typeCode = ''; // 点击分类里面的细分选项卡
handleClickTabs(e) {
let id = e.target.dataset.index,
code = e.target.dataset.id;
typeCode = code;// 这里定义code，在请求回调里面使用
this.setData({ leftTab : id });
if (localMap!=null) {// map对象
let list = localMap.get(typeCode);//获取对应分类的type的code
if (list!=null) {//map里面有值，渲染页面
this.setData({ tabSonList:list }) }else {//map里面没有值，去请求接口 const data = { goodsTypeCode: code };
utils.sendRequest(api.ClassifySon, data, this.handleGoodsSon.bind(this)); }
}else { const data = { goodsTypeCode: code };
utils.sendRequest(api.ClassifySon, data, this.handleGoodsSon.bind(this)); } }, //分类里面的内容 handleGoodsSon(res) {
let list = res.data; localMap.set(typeCode,list)//存对应typeCode的list
this.setData({ tabSonList:list }) },
Таким образом, оптимизация вкладки будет переназначаться при увеличении данных интерфейса. Хотя я добавил себе драматизма, это тоже мое отношение к работе: я узнал много нового и оптимизировал проект.
17. Проблема кэша глобальных переменных апплета
Эта проблема возникает из-за того, что в событии ввода я не нашел лучшего способа отслеживать убирание клавиатуры, а также для лучшего взаимодействия с пользователем, поэтому последующая проблема — это глобальная переменная.После назначения пользователь выходит из On На этой странице глобальная переменная кэшируется WeChat, а затем вызывает ошибку, из-за которой номер мобильного телефона не может быть изменен после того, как пользователь ввел его один раз.
let Btel = '',//防止用户恶意修改手机号
Byzm = '';
handleTel(e) {// 这里修改用户输入的手机号
this.setData({
tel:e.detail.value
})
},
handleYzm(e) {
this.setData({
Yzm:e.detail.value
})
Byzm = e.detail.value;
let psd = this.data.psd,
yzm = this.data.Yzm;
yzm == psd ? this.setData({isYzm:0}):'';
},
handleGetYzm() {
let reg = common.telReg,
val = this.data.tel;
if (!reg.test(val)) {
wx.showModal({
content:'请输入正确的手机号',
showCancel:false,
confirmColor:'#3cc51f',//默认值为#3cc51f
success:res =>{
if(res.confirm){
this.setData({
tel:''
})
}
}
})
}else {//发送验证码的时候用全局变量的手机号
Btel = val;// 这里是全局的手机号
this.setData({
isReset : true,
isNoClick: true
})
const data ={
tel:val//传的是全局变量
};
utils.sendRequest(api.YanZhengMa, data, this.handleGetYzmSucc.bind(this));
//button 定时器
let time = setInterval(()=>{
let phoneCode = this.data.time;
phoneCode --
this.setData({
time : phoneCode
})
if(phoneCode == 0){
clearInterval(time)
this.setData({
isReset : false,
isNoClick: false,
time:60
})
}
},1000)
}
},
//然后这一步是校验了用户在请求完验证码接口后 有没有修改手机好 然后保存
handleSave() {
let name = this.data.name,
telNum = this.data.tel,
yzm = Byzm,
status = this.data.isYzm,
card = wx.getStorageSync('UserCard');
let timestamp= new Date().getTime();
if (yzm == '') {
wx.showModal({
content:'请输入验证码.',
showCancel:false,
confirmColor:'#3cc51f'
})
return false;
}
if (name!=''&&telNum!='') {
if(Btel != telNum) {
utils.showModal('手机号发生变化，请重新获取验证码。');
}else {
const data ={
distribution_id:card.distribution_id,
post:{
user_name:name,
user_tel:Btel,
user_code:yzm
},
user_id:card.user_id,
password:yzm+timestamp
};
utils.sendRequest(api.BindTel, data, this.handleSaveTel.bind(this));
}
}else {
utils.showModal('请填写完整信息哟');
}
},
// 然后在 保存成功之后 用户点击确定 清空 全局变量 也可以在隐藏和卸载的生命周期里面清空全局变量。
handleSaveTel(res) {
if (res.data.error == 0) {
let go = this.data.go,
id = res.data.data.id,
lv = res.data.data.level;
wx.showModal({
content:'绑定成功~',
showCancel:false,
confirmColor:'#3cc51f',//默认值为#3cc51f
success:res =>{
if(res.confirm){
Byzm = '';//对小程序全局变量缓存进行清除
if (go) {
wx.redirectTo({
url: '/pages/user/cash/cash'
})
}else {
if (id != 0) {
let card = wx.getStorageSync('UserCard');
card.distribution_id = id;
card.distribution_level = lv;
wx.setStorageSync('UserCard',card);
wx.setStorageSync('seller', true)
}
wx.switchTab({
url: '/pages/user/index'
})
}
}
}
})
return false
}else {
utils.showModal(res.data.err_msg);
}
}
18. Яма оплаты WeChat для небольших программ
Это так, потому что основная часть компании меняется, уклонение от уплаты налогов и тому подобное. Мини-программу нашей компании нужно перепривязать к оплате WeChat.После того, как финансовый отдел дал нам номер заявки на мерчант-аккаунт, мы договорились приехать на среду посреди ночи. Я помню, это был вечер четверга, среда была переключена в двенадцать часов, и после того, как база данных внутреннего кода была готова, мы перепривязывали платеж WeChat, думая, что мы закончили. У вас все еще может быть гибкое утро в пятницу~
Неожиданно я только что отправил тест и сказал, что оплата WeChat не может быть использована, указывая, что у нас нет авторизации. wtf, вам не следует предполагать, что вы только что связали его. Согласно отчету об ошибке, я пойду в сообщество Mini Program, чтобы посмотреть.
Вы смеете полагать, что мерчант-аккаунт открытой платформы WeChat и официальный мерчант-аккаунт — это две разные вещи. Мини-программа поддерживает учетную запись продавца официальной учетной записи, но когда вы привязываете платеж мини-программы WeChat на открытой платформе, официальное сообщение о том, что привязка выполнена успешно ~.
Потом стало выходить с работы в семь утра. . .
Уроки крови! ! !
19. Ревизия входа в апплет
Эй, просто опубликуй адрес после того, как напишешь его~
20. Яма, к которой не может получить доступ webview апплета под ios
На некоторых страницах апплета на стороне ios белый экран, проблема обнаружилась позже.web-viewПараметры, переданные в src, содержат китайский язык. Сторона ios не разрешает китайский язык в ссылке, поэтому ее можно перекодировать только на китайском языке. Когда страница h5 извлекает параметры, вы можете снова их декодировать.
1 транскодирование китайского языка
encodeURI(url)1
2 Декодировать
decodeURI(url)
Есть также некоторые знания о веб-просмотре
- На каждой странице может быть только одна страница, и она автоматически будет охватывать всю страницу и охватывать другие компоненты.В основном апплет не отслеживает статус веб-просмотра, и только src может быть установлен для установки URL-адреса.
- Что касается связи между апплетом и веб-представлением, → апплет может вернуться на страницу апплета только через интерфейс, предоставленный JSSDK 1.3.0, и установить параметры для передачи значения Напротив, то же самое верно для апплет для веб-просмотра, который может быть только путем приведения параметров src;
- Веб-представление не поддерживает возможность оплаты, что означает, что окно прямой оплаты не может быть вызвано для апплета.Платеж h5 должен поддерживаться, но JSAPI платежа WeChat не может использоваться в веб-представлении, что может иметь отношение к платежному центру h5 для оплаты;
- Что касается уровня, вы можете бесконечно прыгать в веб-просмотре.Для возврата панели навигации и возврата физической клавиши вы вернетесь на предыдущую страницу, пока не выйдете из веб-просмотра, например
history.back. - Заголовок html в веб-просмотре будет автоматически помещен в заголовок апплета в качестве заголовка;
21, вызывая на страницах апплета метод
Потому что текущий проект представляет собой вложенный апплет h5, финансовая категория, распознавание лиц в апплете, а затем покупка управления активами, депозиты и т.п. в h5, после идентификации вернитесь на исходную страницу h5 в соответствии с исходным путем.
Я помню, что в официальном документе говорилось, что getCurrentPages() не меняет маршрут, но также может получить метод страницы, поэтому я могу удовлетворить свои потребности. код показывает, как показано ниже:
let pages = getCurrentPages();
let lastpage = pages[pages.length - 2]
if (lastpage.route === "pages/webview/webview") {
lastpage.changeUrl();
setTimeout(() => {
clearInterval(this.data.time);
wx.navigateBack({})
}, 500)
}
Тогда мне просто нужно написать и заменить маршрут к h5 в js моего веб-просмотра:
changeUrl() {
if (wx.getStorageSync('faceSucc')) {
let url = app.config.h5url + "/" + Util.formatParm(app.globalData.face_retCode, app.parm.h5_servid_url); // console.log(app.globalData.header) // url = url + "?param=" + encodeURIComponent(JSON.stringify(app.globalData.header)) // 缓存bug
if (url.indexOf("?") !== -1) {
url = url + "&d=" + new Date().getTime()
} else {
url = url + "?d=" + new Date().getTime()
}
this.setData({
url: url
})
}
},
Вы можете изменить маршрут h5 предыдущей страницы, когда вернетесь. Это очень удобно.
22. Используйте шифрование AES и NPM для небольших программ
Проекту требуется шифрование AES, и я обнаружил, что внешний интерфейс можно сделать с помощью crypto-js. Если кто-то написал файл js или что-то подобное, вставьте его, и вы можете подготовиться к разработке. Но помните, что сказал мой брат Лонг: написание кода должно быть элегантным. Я случайно обратил внимание на экологию апплета WeChat и знаю, что можно использовать npm. Просто так получилось, что есть пакет crypto-js, просто делайте, что говорите.
Сначала выполните npm init --yes в каталоге проекта апплета, чтобы сгенерировать package.json. В официальной документации также есть предложения при загрузке пакетов npm выполнять npm install --production.
npm install --production --save крипто-js.
Таким образом, у нас есть все, что мы хотим, в основном речь идет о шифровании aes, ля-ля-ля.
Сначала импортировать
/** * aes加密 * {加密字段} word * {秘钥} keyStr */
function encrypt_aes(word, keyStr) {
let key = CryptoJS.enc.Utf8.parse(keyStr);
let srcs = CryptoJS.enc.Utf8.parse(word);
let encrypted = CryptoJS.AES.encrypt(srcs, key, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
let result = encrypted.toString();
console.log("aes加密字段", result)
return result;
}
/** * aes解密 * {加密字段} word * {秘钥} keyStr */
function decrypt_aes(word, keyStr) {
let key = CryptoJS.enc.Utf8.parse(keyStr);
let decrypt = CryptoJS.AES.decrypt(word, key, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
let result = CryptoJS.enc.Utf8.stringify(decrypt).toString();
console.log("aes解密字段", result)
return result;
}
Эффект показан на рисунке:
Таким образом, может быть достигнуто внешнее шифрование AES. Можешь дать мне немного волос~
---------------------------------------------------------------------
Запишите свое собственное путешествие шаг за шагом по яме ~ Я должен это сделать.Моя технология не самая лучшая, но небольшая программа, которую я для вас обобщил, самая простая и грубая хахаха