Taro踩坑实践
2020/2/21 11:17:53
本文主要是介绍Taro踩坑实践,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
背景
快狗合伙人技术部,在去年使用 Taro开发了两个微信小程序,现在均已上线。开发过程中也遇到了一些大大小小的问题,下面列出几个比较典型的,供在使用或者已经使用但是还没有遇到的同学做个参考。
使用 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> ) } } 复制代码
微信小程序手机号码授权
在微信小程序手机号码授权登录使用
onGetPhoneNumber
获取否则获取实现不了。
export default class login extends Component { getPhoneNumber(event) { } render() { return ( <Button openType='getPhoneNumber' onGetPhoneNumber="this.onGetPhoneNumberHandler.bind(this)">获取手机号</Button> ) } } 复制代码
条件编译
Taro 最方便的一点就是支持条件编译,使用Taro特定的文件命名方式就能实现,但是只是在Js方面支持,并不支持在 config 的 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
里面对页面使用是不可以的,例如你想定制支付宝小程序跟微信小程序通过同一个路径去访问不同的页面,只能通过在页面内部,通过代码进行逻辑判断实现。
// 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
相关版本号必须一致,之前有小伙伴出现本地Taro版本很新,拉下代码之后,运行项目不成功,这个很坑。
环境变量
通常项目会运行在多个环境,每个环境有一份对应的配置,如接口服务,如果能在编译的时候自动生成那是最好不过的了,那么如何能在 Taro 中使用。
安装 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' 复制代码
Mock 数据
本地开发,自己编写服务器,数据格式自己定义,使用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", ... } 复制代码
添加mock数据也可以单独放在一个文件中,方便维护。
// 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 复制代码
关注我们
这篇关于Taro踩坑实践的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)