uni-app для битья байтов, апплет Baidu для рукопашного боя

задний план

От самого раннего апплета WeChat, выпущенного до более позднего апплета Alipay, апплета DingTalk, апплета ByteDance, апплета Baidu, апплета QQ и т. Д., Сталкиваясь с таким количеством наборов кодов, разработчикам приходится писать несколько наборов нативных. Стоимость кода, очевидно, очень высока. , а опыт использования H5 не так хорош, как родной.В это время особенно необходимо уметь адаптироваться под несколько терминалов только написав набор кода.
Давайте перейдем к основной теме и представим разработку апплета uni-app byte.

подготовительная работа

• APPID стандартного апплета Toutiao был успешно применен для
• Установить инструменты разработки
  Инструменты разработчика программ Baidu Mini
  Инструменты разработчика ByteDance
  HBuilderX
  Или любую другую IDE, которая вам нравится.

Разработка проекта

Новый проект

в состоянии пройтиВизуальный интерфейс HBuilderXтак же каккомандная строка vuecliспособ создать
Далее в основном рассказывается, как создать новый проект с помощью командной строки vue-cli.

• Установите vue-cli глобально

npm install -g @vue/cli

• Создайте

vue create -p dcloudio/uni-preset-vue user-uni-order

После успешной установки вам будет предложено выбрать шаблон, мы можем выбрать шаблон по умолчанию.

Общий процесс проекта

Кратчайший путь для пользователей по размещению заказа — разместить заказ на главной странице -> статус заказа -> завершить оплату следующим образом:

Таким образом, размеры страницы, которые нам нужно сделать: домашняя страница, поиск адреса, выбор города, вход в систему, личный центр, список заказов, веб-просмотр (стандарт оплаты, ориентировочная цена, статус заказа, детали заказа, юридические условия)

Сделать структуру каталогов

┌─components      //uni-app组件目录
│    └─comp-a.vue     //可复用的a组件
├─common   // 通用的js&css工具等
├─hybrid    //存放本地网页的目录
├─platforms     //存放各平台专用页面的目录
├─pages       //业务页面文件存放的目录
│    ├─index
│    │   └─components   // 页级别组件
│    │   └─vuex  // index页面vuex主要存放index的逻辑
│    │   └─index.vue   // index页面
├─static    //存放应用引用静态资源（如图片、视频等）
│ ├─mp-weixin   //条件编译png
│     │ └─a.png
│     │ └─b.png
├─store // 状态统一管理，将各个页面的vuex汇总
├─service // 汇总请求，api等
│    └─api.js // 接口api相关
│    └─config.js // 环境配置
│    └─index.js
│    └─request.js // 网络请求
├─ttcomponents // 头条小程序自定义组件存放目录 
├─main.js      //Vue初始化入口文件
├─App.vue      //应用配置，用来配置App全局样式以及监听 
├─manifest.json //配置应用名称、appid、logo、版本等打包信息
└─pages.json //配置页面路由、导航条、选项卡等页面类信息

запустить проект

Если вы хотите запустить апплет на какой платформе, вам сначала нужно правильно заполнить соответствующий путь APPID и IDE.

npm run dev:mp-toutiao // 实时监听编译

Операция проходит успешно следующим образом:

На этом этапе откройте IDE ByteDance для операции импорта, и вы увидите страницу~~~

Советы: при использовании байтового компилятора для открытия небольшой программы, скомпилированной uni-app, вы должны импортировать ее, а не создавать новую, потому что новая будет фрагментом кода по умолчанию.Хотя вы можете предварительно просмотреть эффект в в режиме реального времени, это приведет к тому, что функция загрузки будет истинной.

Разработка конкретных страниц

Разработка домашней страницы

• эффект страницы

• Структура домашнего каталога

Структура каталогов других страниц проекта такая же, как и у домашней страницы, и здесь повторяться не будет.

├─pages
│    ├─index
│    │   └─components
│    │   └─vuex
│    │   │  └─index.js // 首页逻辑
│    │   └─index.vue

• Мы используем vuex для управления состоянием, у каждой страницы есть свой vuex, в котором index.js хранит логику, связанную с соответствующей страницей, чтобы избежать частого переключения каталогов, ставить состояние, мутации, действия в файле и включать vuex при использовании модульных, следующим образом

const IndexPage = {
    namespaced: true,  // 启用模块化vuex
    state: {
        ... // 需要共享的状态
    },
    mutations: {
        ... // 一些方法
    }，
    actions: {
        ... // 请求相关
    }
}

export default IndexPage  //最后导出IndexPage

• Vuex каждой страницы унифицирован в магазине

import Vue from 'vue'
import Vuex from 'vuex'

import IndexPage from '../pages/index/vuex'
import AddressSearch from '../pages/address/vuex/index'
import CityListPage from '../pages/city-list/vuex/index'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
  ... // 全局共用的状态
  },

  mutations: {
  },

  actions: {
  },

  modules: {
    IndexPage, // 首页vuex
    AddressSearch, // 地址检索页vuex
	CityListPage, // 城市列表页vuex
  },
})

export default store

• Наконец, сошлитесь на него в main.js.

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App,
  store
})
app.$mount()

Полная логика взаимодействия с домашней страницей успешно построена. Ниже приведены проблемы, возникшие при разработке домашней страницы.

Проблемы, возникающие при разработке домашней страницы

• Используйте компонент карусели swiper, напишите дочерний компонент, родительский компонент не имеет никакого эффекта

  

Причина проблемы: введеноimport swiper from "../../components/swiper/swiper", в результате чего пользовательский swiper перезаписывается, поэтому он не отображается

Решение: введеноimport uniSwiper from "../../components/swiper/swiper", не конфликтуют с оригинальным именем компонента

• Ошибка при переносе в заголовок апплета Baidu

  

Причина проблемы: Baidu устанавливает заголовок http-запроса, если есть китайские символы

Решение: использовать условную компиляцию, если это апплет Baidu, то нужно encodeURI, либо удалить китайскую часть шапки

• Тег изображения uni-app не поддерживает динамический импорт изображений на стороне апплета.

// 引不到
 <image class="tip_icon" src="/static/sender{{endPoint.address ? '' : '_default'}}.png"/>

// 可以引入
<image class="tip_icon" src="/static/sender.png"/>

• uni.getLocation() может получить только широту и долготу, но не может получить подробную информацию об адресе.
• Платформы, отличные от h5: ключ не поддерживает выражения
  из-за :key="timer__${idx}", консоль выдаст предупреждение при компиляции, но на страницу это не влияет

<view 
    class="column_item" 
    v-for="(item, idx) in item" 
    :key="`timer__${idx}`" // 改成:key="idx" 即可
>
{{item == "立即用车" ? "" : index == 1 ? "时" : index == 2 ? "分" : ""}}
</view>

• Компоненты "родитель-потомок" передают параметры. Если определение типа неверно, сообщение об ошибке отображаться не будет. Отображается только null. Поэтому, если вы столкнетесь с проблемой null, вы можете проверить, не согласовано ли определение типа.
• Часы в uni-приложении не поддерживают апплет мониторинга, как показано ниже.

watch: {
    searchType (to) {
      if (to) {
      // 如果是起始地回填起始地信息否则回填目的地信息
        if (to === SEARCH_TYPE.START) {
          this.detailAddress = this.startAddress.detailAddress || ''
        } else {
          this.detailAddress = this.endAddress.detailAddress || ''
        }
      }
    }
}

изменить на

mounted () {
	if (this.searchType === SEARCH_TYPE.START) {
		this.detailAddress = this.startAddress.detailAddress || ''
	} else {
		this.detailAddress = this.endAddress.detailAddress || ''
	}
}

Развитие личного центра

• эффект страницы
  

  

  
  Персональный центр в основном включает страницу H5 и функцию авторизованного входа в апплет. Итак, основная часть — это реализация веб-просмотра.
• Реализация веб-просмотра

// template
<web-view id='web-view' v-if='src' :src='src' @bindmessage='onmessage'></web-view>

onLoad (options) {
    console.log('H5入口页获取到的参数', options)
    let { src, needLogin} = options
    if(!needLogin){
    	this.src = decodeURIComponent(src)
    	return
    }
    // 需要登录的 就先获取临时token
    this.fetchTempToken(src)
}

Если нам не нужно входить в H5, мы можем напрямую назначить его src.Для страниц, которые должны войти в систему для нормального доступа, мы должны сначала получить временный токен.После получения временного токена, вернуть его в server и используйте промежуточную страницу redirectUrl для перехода.

Проблемы, возникающие при развитии личного центра

• Чтобы передать информацию на веб-страницу, используйте bindmessage заголовка API.

Официальное описание «Когда веб-страница отправляет сообщение в апплет, он срабатывает и получает сообщение в определенное время (апплет возвращается, компонент уничтожается, а общий ресурс становится общим)».

// 在小程序中调起H5中的打电话功能
onmessage (e) {
	let { phoneNumber, name } = e.detail
	if(name == 'makePhoneCall'){
		uni.makePhoneCall({
			number: phoneNumber
		})
	}
}

Обратите внимание, что свойство bindmessage веб-представления не работает в режиме реального времени.

• Функция реального телефонного звонка не работает

// 使用uni.makePhoneCall真机没反应
uni.makePhoneCall({ phoneNumber: '114'});

Решение: изменить начало tt Toutiao api

// 真机模拟器均可正常使用
tt.makePhoneCall({ phoneNumber: '114'});

Войти для разработки

• Эффект авторизованного входа Toutiao

  

• Эффект авторизованного входа Baidu

  

• Общая идея:
  1. Сначала получите информацию от поставщика услуг
  2. позвонитьuni.getProviderПолучить код авторизации
  3. Получите номер мобильного телефона пользователя (пользователь входит в приложение заголовка)
  4. От@getphonenumberИнформация о пользователе получена из обратного вызова
  5. Вызов API авторизации входа в систему
  6. Получить токен, openid и другую информацию

// template
<view class="login-page">
	<view class="title">
		<view class="h-line"></view>
		<view class="page-title">授权登录更快捷</view>
		<view class="h-line"></view>
	</view>
	<view class="authLogin-wrapper">
		<!-- #ifdef MP-BAIDU -->
		<button type="default" open-type="getPhoneNumber" @getphonenumber="authLoginTap" class="login authLogin">百度登录更快捷</button>
		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO -->
		<button 
			type="default" 
			class="login authLogin"
			open-type="getPhoneNumber"
			@getphonenumber="onGetPhoneNumber"
		>授权手机号快捷登录</button>
		<!-- #endif -->
	</view>
</view>

// 完成渲染调用授权code方法
mounted () {
	this.getCode()
}

// 获取授权code方法
async getCode () {
	const [ errorProvider, provider ] = await uni.getProvider({ service: 'oauth' })

	if (errorProvider) {
		console.log('获取provider失败')
		return 
	}

	const [ errLogin, data ] =	await uni.login({
		provider: provider.provider[0],
		force: true
	})

	if (errLogin) {
		console.log('获取code失败')
        // 失败的操作，提示等
		return
	}

	const { code } = data
	this.code = code
},

// 头条获取到用户信息  
async onGetPhoneNumber ({ detail }) {
	const { errMsg } = detail
	// 授权失败
	if (errMsg.indexOf('auth deny') > -1) {
        // 取消授权进行手机验证码登录
		return
	} 
	
	try {
        // 调用服务授权接口
		const { data } = await authLogin({
			code: this.code,
			...detail,
		})
		
		if (data.code === SUCCESS) {
		    // 存token, openid等操作
		    // 重新更新个人信息
		} else {
	        // 失败的提示等
		}
	} catch (error) {
		// 登录失败异常情况处理
	}
	
},
// 百度获取到用户信息同理头条。。。

Проблемы, возникающие при разработке входа

Когда мобильный код подтверждения разработан, введениеcheckbox-groupОшибка, как показано ниже:

причина:components : { [CheckBox.name]: CheckBox }Импорт компонентов не поддерживается

Опубликовать в тестовой среде

Взяв в качестве примера ByteDance, откройте инструмент разработчика ByteDance, найдите загрузку на панели инструментов, введите номер версии и опубликуйте. Номер версии не конфликтует с последней.
Советы: Как упоминалось ранее, в инструменте разработчика нет кнопки загрузки для создания нового фрагмента кода.Вам необходимо импортировать проект.

После успешной загрузки вам будет предложено войти на платформу разработчика Mini Program, и теперь вы можете увидеть версию разработчика.

QR-код на картинке выше можно сканировать только как версию этого медицинского осмотра.

Публикация в рабочей среде

• Предварительная подготовка, настройте соответствующее онлайн-доменное имя в фоновом режиме.

  

• Переключитесь на онлайн-среду

// 环境相关配置
export const ENV = {
  // 开发环境
  RD: 'rd',
  // 测试环境
  TEST: 'test',
  // 沙箱环境
  BOX: 'box',
  // 线上环境
  ONLINE: 'online'
}

// 环境切换
export function getCurrentEnv() {
  return ENV.ONLINE // 正式环境切到online
}

• Нажмите «Загрузить» в инструментах разработчика.
• Перейдите на платформу разработчиков мини-программ для просмотра и выпуска.
• После успешного выпуска его можно найти в строке поиска заголовков.Для Douyin только платформа Android запустила функцию апплета.

заключительные замечания

Вышеизложенное является частью разработки uni-app to byte beating и апплета Baidu.Я считаю, что у всех есть предварительное понимание реального боевого апплета uni-app.Вы также можете исправлять меня, общаться друг с другом и делать прогрессировать вместе.

Опыт сканирования кода

Откройте приложение Toutiao и найдите «Kaigou Taxi Mini Program» или используйте Toutiao, чтобы отсканировать и испытать его ~

Подписывайтесь на нас