В последнее время занимаюсь разработкой небольших программных проектов.Начал непосредственно с wepy.Стиль похож на vue.В целом относительно стабилен,эффективность разработки чуть выше,чем у vue. родной.Многие знают и то,что mpvue построен с vue,но мне всегда кажется,что потерять vue роутинга,это как потерять душу,хотя фреймворк амвей будет даваться всем следующим,душу-то он как бы потерял- структура таро (Taroпредставляет собой наборReactграмматическийМультитерминальная разработкарешение. )
документация по разработке таро:Дочь Ви — .GitHub.IO/taro/docs/R…
Здесь я поделюсь своим первоначальным процессом обучения попаданию в яму, а также создам общую основу, чтобы поделиться с вами, я всегда помнил слова моего нынешнего босса Вега:
«В процессе обучения, даже если код удастся скопировать, я наберу его снова, чтобы углубить впечатление»
Итак, заинтересованные друзья, вы также можете следовать шаг за шагом:
Первый: установить инструменты разработки Taro@tarojs/cli
npm install -g @tarojs/cli
Два: используйте команду для создания шаблона проекта
taro init taro-react-mini-program
Вы можете выбрать, использовать ли ts, sass или меньше в соответствии с вашими потребностями, а затем дождаться установки зависимостей и сборки проекта;
Три: структура каталогов проекта
├── dist 编译结果目录
├── config 配置目录
| ├── dev.js 开发时配置
| ├── index.js 默认配置
| └── prod.js 打包时配置
├── src 源码目录
| ├── pages 页面文件目录
| | ├── index index页面目录
| | | ├── index.js index页面逻辑
| | | └── index.css index页面样式
| ├── app.css 项目总通用样式
| └── app.js 项目入口文件
└── package.json
Использование и меры предосторожности фреймворка представлены в документе.Здесь я в основном пишу некоторые конфигурации проекта и ямы, на которые я наступил;
Здесь вам нужно сначала установить некоторые зависимости
npm install tslint stylelint tslint-config-prettier -D
Спецификация кода
{
"stylelintIntegration": true,
"tslintIntegration": true,
"tabWidth": 2,
"singleQuote": true,
"semi": false
}
.prettierignore
/**/libs/**
dist/
lib/
Технические характеристики стиля: .stylelintrc.js
module.exports = {
ignoreFiles: ['**/*.md', '**/*.ts', '**/*.tsx', '**/*.js']
}
.stylelintignore
**/dist
tslint.json
{
"extends": ["tslint:recommended", "tslint-config-prettier"],
"rules": {
"ordered-imports": false,
"object-literal-sort-keys": false,
"member-access": false,
"member-ordering": false,
"no-empty-interface": false,
"no-console": [true, "warning"],
"interface-name": [true, "never-prefix"],
"no-empty": false,
"quotemark": [true, "single"]
// "semicolon": [false], // 结尾比较分号
// "trailing-comma": [false], // 结尾必须逗号
// "requireForBlockBody": true,
}
}
Затем настройте проверку отправки git submit, вам нужно установить соответствующий пакет зависимостей, вы можете увидеть из моей другой статьи:
Кроме того, настройте файл .gitignore самостоятельно, и таким образом мы настроили все необходимые нам файлы конфигурации, посмотрите на результат:
При нерегулярной отправке кода
Отправьте после решения всех проблем.Конечно, tslint и некоторые другие конфигурации настроены и могут быть настроены самостоятельно. Если вы чувствуете себя хлопотно, вы можете настроить проект по своему «вкусу».
Затем мы можем с радостью разработать наш проект, запустить npm run dev:weapp и открыть наш апплет.
Многие люди сообщают, что всегда неправильно использовать собственный Taro.request или сторонние аксиомы для выполнения асинхронных запросов.Я сам не тестировал это, но я инкапсулировал метод с промисами и создал папку utils в папке src корневого каталога. Здесь я просто имитирую авторизованный вход в WeChat, и определяю, истек ли срок действия сеанса, и пишу общий пример сценария привязки пользователей. Интерфейс вымышленный:
├── utils
| ├── api.ts 请求接口设置
| ├── http.ts http公共请求文件
| └── index.ts
Код http.ts выглядит следующим образом:
import Taro from '@tarojs/taro'
import md5 from 'blueimp-md5'
type HttpMethods = 'GET' | 'POST' | 'PUT' | 'DELETE'
// 后端是否支持json格式
const contentType = 'application/x-www-form-urlencoded'
// const contentType = 'application/json'
export default class Http {
noNeedToken = ['mockFakeApi']
get(url: string, data: object) {
return this.commonHttp('GET', url, data)
}
post(url: string, data: object) {
return this.commonHttp('POST', url, data)
}
async commonHttp(method: HttpMethods, url: string, data: object) {
return new Promise<any>(async (resolve, reject) => {
Taro.showNavigationBarLoading()
try {
const res = await Taro.request({
url,
method,
data,
header: {
'content-type': contentType
}
})
Taro.hideNavigationBarLoading()
switch (res.statusCode) {
case 200:
return resolve(res.data.response)
default:
console.log(res.data.message)
reject(new Error(res.data.msg))
}
} catch (error) {
Taro.hideNavigationBarLoading()
reject(new Error('网络请求出错'))
}
})
}
}
api.ts
import Http from './http'
const http = new Http()
// 自动登录
const url = 'xxxxx'
export const login = (data: object) => http.post(url, data)
index.ts (пользовательский общедоступный файл интерфейса обработки)
import Taro from '@tarojs/taro'
import { login } from './api'
// 获取微信登录凭证
export const wxLogin = async () => {
try {
const res = await Taro.login()
return res.code
} catch (error) {
console.log('微信获取临时凭着失败')
}
}
export const userLogin = async () => {
try {
await Taro.checkSession()
if (!Taro.getStorageSync('token')) {
throw new Error('本地没有缓存token')
}
} catch (error) {
const code = await wxLogin()
const loginRes: any = await login({
code
// ...(其他参数)
})
console.log('用户数据', loginRes)
}
}
Наконец, просто обратитесь к pages/index/index.tsx
import { userLogin } from '../../utils/index'
....
async componentDidMount() {
await userLogin()
}
Использование всего фреймворка примерно такое. Стиль каллиграфии react вполне удобен. Если вы привыкли к стилю написания vue, то сначала можете не привыкнуть к нему. Если интересно, можете попробовать Вот несколько простых советов по дополнению:
1: Введение картинок в виде модулей
Если вы используете ts для сборки проекта и введения статических ресурсов, таких как изображения, вам будет предложено, что модуль не может быть найден.В это время вы должны объявить изображение как модуль:
В файле global.d.ts в каталоге типов:
объявить модуль '*.png' {
const img: любой
экспортировать img по умолчанию
}
Два: динамически добавлять стиль
<View style={{backgroundImage: `url(${bgImg})`}}></View>
Три: динамически добавить класс
1.<View className={data.length>0?’class-yes’: ’class-no'}></View>
2.<View className={`common ${data.length>0?’class-yes’: ’class-no}`}></View>
Четыре: это указывает на проблему
1) На странице Таро и в классах компонентовthisУказывает на пример страницы или компонента Таро, если мы хотим сослаться на нативные компоненты, нужно использовать это время, если следующая цитата:
Taro.createCanvasContext(canvasId, this.$scope)
wx.createLivePlayerContext(liveId, this.$scope)
Ошибка: введение wx.createLivePlayerContext(liveId, this) не имеет никакого эффекта, это не указывает на wx.createLivePlayerContext.
(В текущей версии нет метода обратного вызова для liveplayer, поэтому используйте собственный wx напрямую)
Пять: глобальная проблема стиля
Глобальный исходный app.scss влияет только на файлы уровня страницы, и компоненты не могут получить глобальный стиль.
Вы можете импортировать глобальный файл стиля внутри компонента, но здесь возможно, что несколько компонентов будут введены глобально, и будет создано несколько глобальных файлов стилей.
Соответствующий код я загрузил на свой github: