задний план

Партнерский технологический отдел Kuaigou, использованный в прошлом годуTaroБыли разработаны две мини-программы WeChat, обе из которых уже доступны онлайн. В процессе разработки также есть некоторые большие и маленькие проблемы, Ниже приведены некоторые типичные для справки студентов, которые используют или использовали его, но еще не столкнулись с ними.

Рендеринг списка с помощью Mobx

Используйте типы массивов в оболочке Mobx дляslice()Нажмите, иначе рендеринг списка будет неудачным.

// store.js
import { observable, action } from 'mobx'

class ListStore {
    @observable listData = []
    
    ...
}

export default new ListStore()

// List.jsx

import Taro, { Component } from '@tarojs/taro'
import { observer, inject } from '@tarojs/mobx'

@inject('ListStore')
@observer
export default class List extends Component {
    ...
    
   
    render() {
        let list = this.props.ListStore.listData
    
        list.slice()
        
        const renderList = list && list.map((item) => (<View>{item.name}</View>))

        return (
            <View>{renderList}</View>
        )
    }
}

Авторизация номера мобильного телефона через апплет WeChat

Авторизованный вход и использование номера мобильного телефона в апплете WeChatonGetPhoneNumberПолучить или получить не может быть достигнуто.

export default class login extends Component {

    getPhoneNumber(event) {
 
    }
 
    render() {
        return (
            <Button  openType='getPhoneNumber' onGetPhoneNumber="this.onGetPhoneNumberHandler.bind(this)">获取手机号</Button>
        )
    }
}

Условная компиляция

Наиболее удобным моментом Taro является то, что он поддерживает условную компиляцию, которая может быть достигнута с помощью специального метода именования файлов Taro, но он поддерживается только в Js, а не в опции pages конфигурации.

// src/set_title

// set_title.h5.js

/**
 * H5 设置页面title
 * @param {String} title
 */
export default function setTitle (title) {
  document.title = title
}


// set_title.weapp.js

import Taro from '@tarojs/taro'

export default function setTitle (title) {
  Taro.setNavigationBarTitle({ title })
}

использовать

import setTitle from src/set_title

export default class MobileLogin extends Component {
  
    ...
    
    componentWillMount () {
        setTitle('标题')
    }
  
    render() {
        return (<View />)
    }
}

Условная компиляция полезна, но вapp.jsНе разрешается использовать страницу внутри.Например, если вы хотите настроить апплет Alipay и апплет WeChat для доступа к разным страницам по одному и тому же пути, это может быть достигнуто только логическим суждением через код внутри страницы.

// app.js

config = {
    pages: [
        // 只能是具体的文件
        'pages/Home/index',
        'pages/List/index'
    ]
}

проблема с версией

Было такое раньше, при инициализации проекта не использовался шаблон @taro/Mobx, а устанавливался отдельно, из-за чего страница отображалась ненормально на младших версиях ios (ios9). Причина в том, что используемая версия mobx слишком новая, следует использовать mobx@4.8.0.

// package.json

{
    "dependencies": {
        "@tarojs/mobx": "1.3.19",
        "@tarojs/mobx-h5": "1.3.19",
        "@tarojs/mobx-rn": "1.3.19",
        "mobx": "4.8.0",
        ...
    }
}

Примечание. Важно отметить, что он устанавливается локально и глобально.taro-cliзависимости в проекте@tarojsСоответствующие номера версий должны быть одинаковыми.Раньше небольшой партнер показал, что локальная версия Таро очень новая.После сноса кода запущенный проект не удался, что очень жаль.

переменная среды

Обычно проект запускается в нескольких средах, каждая среда имеет соответствующую конфигурацию, например интерфейсные сервисы, если она может быть автоматически сгенерирована во время компиляции, это лучше всего, то как ее можно использовать в Таро.

Установитьcross-envУстановите переменные среды, затем измените package.json

// package.json
...
"scripts": {
    "test:weapp": "cross-env APP_NS=test npm run build:weapp",
    "sandbox:weapp": "cross-env APP_NS=sandbox npm run build:weapp",
    "online:weapp": "cross-env APP_NS=online npm run build:weapp"
    ...
}

Чтобы изменить конфигурацию производственной среды Taro, выполните толькоnpm run build:xxКогда код этого файла выполняется, то есть вnpm run dev:xxНа самом деле это не влияет, поэтому локальная среда разработки,APP_NSНикаких настроек не делается.

// config/prod.js

const APP_NS = JSON.stringify(process.env.APP_NS);

module.exports = {
  env: {
    NODE_ENV: '"production"',
    APP_NS: `${APP_NS}`
  },
  ...
}

Таким образом, каждый раз, когда вы упаковываете, вы можете различать среду и использовать переменные среды, установленные средой.APP_NSЗначение , вы можете получить соответствующую строку во время компиляции, чтобы отличить пакет ресурсов от текущей среды.

// src/api.js

const _env = process.env.APP_NS

const oUrl = {
    test: 'https://test.suyun.com',
    sandbox: 'https://sandbox.suyun.com',
    online: 'https://online.suyun.com'
}

export const baseUrl = oUrl[_env] || '/api'

Имитация данных

Локальная разработка, напишите свой собственный сервер, определите свой собственный формат данных, используйтеMockjsРеализован для использования в качестве локального отдельного сервера.

// mock/server.js

/**
 * mock 服务器
 */

const express = require('express')
const apiMocker = require('mocker-api')
const Mock = require('mockjs')

const mock = Mock.mock;

const PORT = 3000

const app = express();

const mocker = {
    'GET /list': mock({
        "code": 0,
        "message": 'success',
        "data|10": [
            {
                "sid": "@id",
                "name": "@cname",
                "photo": "@image",
            }
        ]
    })
}


apiMocker(app, mocker)

app.listen(PORT, () => {
  console.log(`Mock Server listening on http://localhost:${PORT}`)
});

Исправлятьpackage.jsкоманда сценария

"scripts": {
    "mock": "node ./mock/mock-server.js",
    ...
}

Добавление фиктивных данных также может быть помещено в отдельный файл для удобства обслуживания.

// mocker.js

const Mock = require('mockjs');

const mock = Mock.mock;

const mocker = {
    'GET /list': mock({
        "code": 0,
        "message": 'success',
        "data|10": [
            {
                "sid": "@id",
                "name": "@cname",
                "photo": "@image",
            }
        ]
    })
}

module.exports = mocker

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