В первый месяц прихода в новую компанию мне дали задание небольшой программы.Что касается front-end компании, то это действительно означает свободу и свободу, как хорошую, так и плохую. Преимущество в том, что мне неудобно смотреть на нативную документацию апплета, поэтому я изучил волну написания с vue, поэтому нашел Uni-app В начале написания официальной рекомендацией является использование HbuildeX, и я использовал его некоторое время (на самом деле, я не хочу использовать эту IDE, когда открываю ее).
1. Подготовка перед разработкой
- строительные леса
- Инструменты разработчика WeChat
Настройте их сами, ла-ла-ла
2. Разработка в vscode
Сначала установите плагин
В связи с использованием API-интерфейса апплета рекомендуется установить плагин vscode для помощника по разработке апплетов.
Первый плагин, enmm, ignore (я здесь, чтобы писать код, а не ловить рыбу)
Конечно, вам также необходимо установить плагин проверки грамматики vue Vetur (у вас он должен быть установлен, и вы хотите использовать vue для написания небольших программ)
начать разработку
Давайте взглянем на то, как это выглядит (не обращая внимания на красоту, ведь специального UI нет, я фронтенд-братишка без красоты)
1. Создайте проект
Откройте свой любимый powershell и напишите
vue create -p dcloudio/uni-preset-vue mygreatepro
// 后面是随便你的名字
Выберите шаблон, шаблон по умолчанию, просто нажмите Enter, если вам нравится TS, вы можете выбрать TS (Кто может научить меня писать ТС, большие ребята)
Тогда подожди и посмотри, посмотри
Не слушайте его, то, что мы собираемся написать, это небольшая программа, мы должны войти в папку проекта и выполнить
npm run dev:mp-weixin // 开发阶段
npm run build:mp-weixin // 发布阶段
2. Начать работу
1. Откройте папку проекта, которую вы создали с помощью vscode.
За исключением этих нескольких файлов, другие проекты, созданные с помощью скаффолдинга, выглядят так же, они более привычны и удобны (я просто ненавижу нативный фреймворк апплета WeChat).
2. Предварительный просмотр в инструментах разработчика
мы только что казнилиnpm run dev:mp-weixinПосле этого вы можете напрямую открыть инструменты разработчика и импортировать проект.
Не пишите сначала appid, его все равно здесь не написано, просто импортируйте его
Если вы уже подали заявку, используйте свой vscode, найдите файл manifest.json, который нужно открыть, и найдите это место.
"mp-weixin": { /* 微信小程序特有相关 */
"appid": "这里写appid",
"setting": {
"urlCheck": false
},
"usingComponents": true
}
Затем перейдите к превью и увидите это:
готово
3. Начать разработку
Проверьте, что есть в Интернете
Если ты думаешь, что это некрасиво, я ударю кого-нибудь
1. Анализ потребностей
Три TAB-страницы, очевидно, тоже нужно зайти на авторизацию, плюс страница авторизации.
Хорошо, сначала подготовьте страницу
Не забудьте написать это в pages.json, чтобы WeChat мог с этим справиться (то, что сказал WeChat)
Поскольку это тег табуляции, вам также необходимо настроить tabBar в файле pages.json.
"tabBar": {
"color": "#8a8a8a",
"selectedColor": "#d4237a",
"backgroundColor": "#fff",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/anchor/index",
"text": "主播",
"iconPath": "static/tabar/1-1.png",
"selectedIconPath": "static/tabar/1.png"
},
{
"pagePath": "pages/withdraw/index",
"text": "提现",
"iconPath": "static/tabar/2-1.png",
"selectedIconPath": "static/tabar/2.png"
},
{
"pagePath": "pages/mine/index",
"text": "我的",
"iconPath": "static/tabar/4-1.png",
"selectedIconPath": "static/tabar/4.png"
}
]
}
Вы можете видеть, что соответствующие статичные изображения и другие файлы размещены под статикой, но учтите, что файлы стилей css здесь размещать нельзя, иначе они не скомпилируются в wxss, а потом будете долго запутываться и писать в напрасно
Выше все написано, да, это можно посмотреть в инструментах разработчика
Вот и все.
2. Кнопка открытия
Я использую scss, поэтому нужноyarn add sass-loader node-sass
dlould предоставляет инфраструктуру uni-ui с богатыми компонентами, так что используйте ее
1. Шаги по использованию uni-ui
- Установитьyarn add @dcloudio/uni-ui
- использовать локальный импорт, зарегистрироваться, использовать
Рекомендуется смотреть непосредственно на это на npmУууу, эта лошадь plus.com/package/@this…
2. Используйте волну на моей анкорной странице
Компонент, похожий на метку вкладки, который называется сегментером.
-
1. Скопируйте код шага в npm
-
import {uniBadge} from '@dcloudio/uni-ui' export default { components: {uniBadge} }
-
-
2. Найдите соответствующее имя компонента для использованияuniSegmentedControlзаменять
-
3. Найдите html-структуру, вы можете найти название каждого плагина, который вам нужен, на рынке плагинов.Обратите внимание, что нет префикса uni
-
4. Найдя его, согласно документу, вставьте в шаблон и пользуйтесь
Адрес плагина:доб. Только если cloud.net. может /plugin?ID=5…
Уведомление: А вот и яма, пример кода в документе, который обрабатывает событие щелчка при переключении разных видов.
Далее следует e, указанный выше параметр по-прежнему является индексом, это не проблема, обратите внимание на изменение индекса на e.
Советы: Если вы обнаружите, что предварительный просмотр апплета не изменился, вы можете перекомпилировать его.Иногда новые компоненты необходимо время от времени перекомпилировать.
Затем просмотрите сейчас, чтобы узнать
готово
Следующий:
1. Авторизация входа
1. Механизм входа в апплет
-
Традиционный логин (метод jwt в качестве примера)
-
Пользователь вводит имя пользователя и пароль (пароль должен быть зашифрован каким-либо алгоритмом) для доступа к интерфейсу входа в систему.
-
Серверная часть проверяет имя пользователя и пароль, шифрует информацию о пользователе в строку токена и возвращает ее во внешний интерфейс.
-
Внешний интерфейс сохраняет токен (просто локализованное хранилище, вот вопрос интервью: в чем разница между локальным хранилищем, сессионным хранилищем и файлами cookie? Спросите себя)
-
Каждый раз, когда интерфейс отправляет запрос, он отправляет токен на сервер, и сервер определяет, является ли статус входа в систему законным (как передать токен, поместить его в голову или в тело, и обсуждайте с бэкендом сами)
-
Затем внешний интерфейс решает, следует ли выполнять какую-либо операцию в соответствии с ситуацией возврата.
После того, как мы представим их, мы должны упомянуть известные вопросы интервью: В чем разница между cookie, сеансом и токеном? ? ? Порекомендуйте статью, вы можете посмотреть ее, друзья, которые не знаютnuggets.capable/post/684490…
-
-
Вход в мини-программу Авторизация У апплета нет окна входа в систему, и он разрешает только использование информации о пользователе Каков процесс обработки? Простые шаги: Получить информацию о пользователе для авторизации----->вызвать интерфейс wx.login------>получить возвращенный уникальный код аутентификации----->передать код с информацией о пользователе на сервер----> Задняя часть такая же, как выше
должен быть в курсе
- Код можно использовать только один раз, и срок его действия истекает через пять минут, если он истечет, вам нужно повторно использовать wx.login().
2. Делаем авторизацию входа
2-1. Сценарии мышления
在小程序加载之前，判断是否登录过（就是有没有token咯），如果没有登陆过，就跳转登录界面（或者直接调用获取用户信息接口以及登录接口）
2-2 Решение перед входом в систему
Перед загрузкой апплета определите, следует ли войти в систему, и выполните соответствующий переход
Как сообщить перед загрузкой? ------> Функция хука жизненного цикла
На данный момент, когда мы открываем app.vue в проекте, мы увидим следующий код:
onLaunch: function() {
// 这时app初始化完成
// 注意全局只触发一次！！！
console.log('App Launch')
},
onShow: function() {
// app从后台切入前台或者启动
// 显然这是判断是否登陆过的好机会
console.log('App Show')
},
onHide: function() {
// app从前台进入后台
console.log('App Hide')
}
Поэтому способ суждения
onShow: function() {
// 查一下都获取了那些权限
wx.getSetting({
success(res) {
// 看看有没有用户信息，如果不存在，证明没有登陆
if (!res.authSetting["scope.userInfo"]) {
// 关闭所有页面，打开到应用内的登录页面
wx.reLaunch({
url: "/pages/authorise/index"
});
}
}
});
},
API, связанные с переходом между страницами апплета
wx.reLaunch(); // 关闭所有页面，打开到应用内的某个页面
wx.switchTab(); // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.navigateTo(); // 跳转到某个页面
wx.navigateBack(); // 返回到上个页面，需要跟navigateTo配合使用
Для конкретного использования, пожалуйста, обратитесь к документации wx.Если вы действительно не можете ее прочитать, просто посмотрите документацию uniapp.В любом случае она выглядит одинаково.
Пакет API uniapp наследует API апплета.В принципе, слово wx перед API апплета можно использовать, если его изменить на uni
2-3 Операция входа в систему
Без лишних слов, посмотрите на код API-интерфейс Wechat с некоторыми разрешениями был заброшен, и теперь мы можем выполнять некоторые операции с разрешениями только через атрибут opentype кнопки. Следующий код включает обработку процесса авторизации вторичной загрузки после отказа пользователя от авторизации.
<button open-type="getUserInfo" lang="zh_CN" @getuserinfo="mpGetUserInfo" size="mini" v-if="show">授权登录</button>
<button type="primary" size="mini" open-type="openSetting" @opensetting="reauthorize" v-else>重新授权</button>
// 获取到用户信息后，调用登录接口，如果被拒绝授权，就跳转到设置页面
mpGetUserInfo(result) {
const that = this;
// 查看是否授权
wx.getSetting({
success(res) {
if (res.authSetting["scope.userInfo"]) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: function(res) {
that.userInfo = res.userInfo;
wx.login({
success: function(loginRes) {
that.userInfo.code = loginRes.code;
that.$http({
url: "登录接口地址",
data: that.userInfo,
method: "POST"
})
.then(res => {
// 登录失败，提示错误信息,重新打开授权页面
if (判断登录失败的条件) {
wx.redirectTo({
url: ""
});
// 登陆成功
} else {
// 保存登陆成功获取的token
wx.setStorageSync("token", res.data.userinfo.token);
// 保存返回的被处理过的用户信息
uni.setStorageSync("login", res.data.userinfo);
// 登陆成功 跳转到tab首页
wx.switchTab({
url: ""
});
}
});
}
});
}
});
} else {
that.show = false;
}
}
});
},
// 处理重新授权后的回调函数
reauthorize(e) {
if (e.detail.authSetting["scope.userInfo"]) {
// 若二次授权成功，切换对话框的显示按钮
this.show = true;
}
}
Таким образом, чтобы получить немного, как это. После прочтения укажите хвалебное пение.
Продолжай читать Первая коса, три дня, братишка не получил зарплату, так что заморачивайся, давай потрогаем рыбку, друзья
последняя книга сказала
this.$http отправляет запрос, что это?
1. Отправьте запрос в проекте vue на стороне ПК
Фиктивные шаги: (используя аксиомы)
yarn add axios
// npm 也行啦
// 在cli项目中
// main.js中
import axios from 'axios'
// 配置请求的根路径
// 这个baseURL如果配置了跨域代理，就把proxy里配的名字给它就成
axios.defaults.baseURL = '/api'
// 配置请求拦截器
axios.interceptors.request.use(config => {
// 这里做各种预处理，加token啦，拦截权限访问啦随便
return config
}, (error) => { return Promise.reject(error) })
axios.interceptors.response.use(config => {
return config
})
// 挂载到vue上
Vue.prototype.$http = axios
2. Запрос мини-программы
1. Оригинальный метод:
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
Сюэ немного неудобно, потому что он привык использовать аксиомы и поддерживает промисы, так что давайте пусть он поддерживает промисы
2. Инкапсулируйте небольшую функцию запроса, которая поддерживает промисы
- 1. Создайте новый файл request.js и поместите его в папку с именем utils (я не буду говорить вам, что означает utils)
- 2. Экспорт объекта функции по умолчанию
- 3. Функция возвращает обещание, в котором есть разрешение и отклонение.Если вы не знаете, что такое обещание, посмотрите другие статьи моего брата.
export default () => {
return new Promise((resolve,reject)=>{
})
}
- 4. Инкапсулируйте API WeChat (API uniapp тоже подойдет. Если есть требования к кросс-энду, напрямую инкапсулируйте requestapi uni, что почти то же самое)
export default () => {
return new Promise((resolve,reject)=>{
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
})
}
- 5. Продолжайте инкапсулировать, сейчас вы не можете использовать его напрямую
// 把会改的参数抽出来，像URL啦，methods啦，data数据啦，通过形参的方式传递，把请求的成功或者失败的结果弄出去
export default (params) => {
return new Promise((resolve,reject)=>{
wx.request({
...params
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
resolve(res) // 这里resolve出去的是res还是res.data看你们请求返回的数据
}
fail: (err) => {
reject(err)
},
)
})
}
- 6. У Axios есть базовый URL для экономии усилий, он нам тоже нужен
export default (params) => {
const baseUrl = "写你自己的地址的公共部分"
return new Promise((resolve, reject) => {
wx.request({
...params,
url: baseUrl + params.url,
success: (res) => {
resolve(res.data)
},
fail: (err) => {
reject(err)
}
});
})
}
- 7. Обработка заголовков запроса
// 比如需要携带token请求的
// 比如需要设置一些字段类型 都在这里搞
export default (params) => {
const baseUrl = "https://www.jianbingkonggu.com/"
let head = {}
if (判断需要加token请求的条件) {
head["token"] = uni.getStorageSync('token');
}
head['Content-Type'] = 'application/x-www-form-urlencoded'
return new Promise((resolve, reject) => {
wx.request({
...params,
url: baseUrl + params.url,
header: head,
success: (res) => {
resolve(res.data)
},
fail: (err) => {
reject(err)
}
});
})
}
полная версия
export default (params) => {
const baseUrl = "https://www.jianbingkonggu.com/"
let head = {}
if (!params.url.includes("/MiniProgramLogin")) {
head["token"] = uni.getStorageSync('token');
}
head['Content-Type'] = 'application/x-www-form-urlencoded'
return new Promise((resolve, reject) => {
// 为了让用户看起来更舒服
// 弄一个加载中动画
uni.showLoading({
title: '加载中'
})
wx.request({
...params,
url: baseUrl + params.url,
header: head,
success: (res) => {
resolve(res.data)
},
fail: (err) => {
reject(err)
},
complete: () => {
// 请求完成
// 隐藏加载中的提示框
uni.hideLoading()
}
});
})
}
2. Как это использовать в проекте?
Одним словом, то же, что и axios
- представлять
- устанавливать
- использовать
в main.js
import Request from './utils/request'
Vue.prototype.$http = Request
Затем вы можете с радостью использовать this.$http(various parameters).then() в однофайловом компоненте vue, что гладко и круто.
Какие навыки нам нужны? Пишите небольшие программы с vue
Не сомневайтесь, жители Шаньдуна просто любят переворачивать предложения.
Кажется, ничего
непосредственный
// 把之前的npm run dev:mp-weixin的黑窗口ctr+c退出哈先
// 然后执行
npm run build:mp-weixin
Закрываем проект в текущем инструменте разработчика, и заново вводим папку mp-weixin в папку сборки под папку dist.Это наш упакованный файл.После импорта протестируйте его сами.Если проблем нет,нажмите на разработчика Загрузите кнопку в правом верхнем углу, загрузите код, а затем войдите в фон апплета WeChat, чтобы отправить код на проверку.