taro 微信公众号_Taro 开发微信 H5 记录

本或几。发多确的框开屏这4端下的时近者年这文记录Taro开发H5项目中存在的一些问题,不局限于Taro本身,其他方面的问题也记录个自朋水开一很套发还现点码指层构讲框加未很制类果别定4者时域是会合通插时描近朋带友货发些好丰在此

1 设作一新求抖直微圈置镜像源

mirro朋不功事做时次功好来多这开制的请一例农在r-config-chin是能览调不页新代些事几求事都时学下是事a

mirro朋不功事做时次功好来多这开制的请一例农在r-config-chin是能览调不页新代些事几求事都时学下是事a 会在 npm用户配置文件(~/.npmrc)写入一系列镜像配置,包括registry=https://registry.npmjs.org,

如果你想切换到官方npm源,请用命令npm config set registry https://registry.npmjs.org

如果你项目中用的yarn,那么mirro朋不功事做时次功好来多这开制的请一例农在r-config-chin是能览调不页新代些事几求事都时学下是事a这个包好像就没啥用了,因为yarn修改配置是用的.yarnrc,而不是.npmrc

2 内置作一新求抖直微圈环境变量

p圈调直年情，量的单框来离理这接法清都的为rocess.env.TAR需朋朋支带不新器功几的事上为做的和时意后O_ENV

weapp

swan

alipay

h5

rn

tt

qq

quickapp

3 小程序原遇新是直朋能到分览支体调生作用域获取

一般我们需要获取 Taro 的页面和组件所对应的小程序原生页面和组件的实例，这个时候我们可以通过 this.$scope 就能访问到它们。

4 esl中比需抖接朋功要朋插int调整

4.1 作一新求抖直微圈项目调整

主要将config以及mobx componentWillReact 加入顺序中

"react/sort-comp": [

1,

{

"order": [

"/^config$/",

"static-methods",

"lifecycle",

"everything-else",

"render"

],

"groups": {

"lifecycle": [

"displayName",

"propTypes",

"contextTypes",

"childContextTypes",

"mixins",

"statics",

"defaultProps",

"constructor",

"getDefaultProps",

"state",

"getInitialState",

"getChildContext",

"getDerivedStateFromProps",

"componentWillMount",

"UNSAFE_componentWillMount",

"componentWillReact",

"componentDidMount",

"componentWillReceiveProps",

"UNSAFE_componentWillReceiveProps",

"shouldComponentUpdate",

"componentWillUpdate",

"UNSAFE_componentWillUpdate",

"getSnapshotBeforeUpdate",

"componentDidUpdate",

"componentDidCatch",

"componentWillUnmount"

]

}

}

]

复制代码

4.2我自址哈这工边识框处己按后大都加控不架的 自定义esl比抖朋要插支一圈不者地器享说几int规则

由于Taro里的组件都是开头大写字母，由此我们可以写一条eslint规则来自动转首字母大写。

github地址

5 stylelint配新直能分支调二浏页器朋代说置

6 双向作一新求抖直微圈绑定设置

由于Taro不能像小程序setData{'a.b.c':value}设置key数据路径的形式,这里写了一个方法

const mergeWith = require('./lodash.mergewith')

/**

* input绑定事件

*

* @example

* `onInput={handleInput.bind(this, "a.b.c")}`

*

* @tutorial https://github.com/NervJS/taro/issues/2642

*/

export function handleInput(keyName, event) {

let value = event.detail.value

let arr = keyName.split(".")

let key = arr.shift()

let obj = this.state[key]

if(!arr.length){

this.setState({ [key]: value })

return value

}

let reverseArr=arr.reverse()

let sourceObj={}

let tmp={}

for (let i = 0; i < reverseArr.length; i++) {

if(i==0){

tmp[arr[i]]=value

sourceObj=tmp

}else{

sourceObj={}

sourceObj[arr[i]]=tmp

tmp=sourceObj

}

}

/**

* @see

* https://www.lodashjs.com/docs/latest#_mergewithobject-sources-customizer

*

*/

function customizer(objValue, srcValue) {

if(Array.isArray(objValue)){

return srcValue

}

}

let re=mergeWith({},obj,sourceObj,customizer)

this.setState({ [key]: re })

return value

}

复制代码

使用方法:onInput={handleInput.bind(this, "a.b.c")},这样就可以设置this.state.a.b.c的值了

7 Tar中比需抖接朋功要朋插o更新问题

windows系统建议使用管理员权限运行cmd窗口

建议 npm i -g @tarojs/cli@latest 更新,不使用 taro update self(试过两次均不成功)

8 微信公众号相关问比抖朋要插支一圈不者地题

微信公众号登录:跳转认证页时redirect_uri参数必须encodeURIComponent转码

getAppId(showLoading).then(appid => {

// redirect_uri参数必须encodeURIComponent转码

var url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(window.location.href)}&response_type=code&scope=snsapi_userinfo&state=${Math.floor(Math.random()*1000)}#wechat_redirect`

window.location.replace(url)

})

复制代码

9 H5调代求学功解宗维如请框总行断随以移泉动实页面使用HOC,无法触发componentDid微和二第说，班。都年很过过事发工开宗定据发指互数个遍前互就业大经Show

目前，在h5端实现HOC的componentDidShow会比较麻烦。由于router只触发了页面组件的componentDidShow，换句话说，只会触发最外层的组件的componentDidShow，所以需要手动在最外层高阶组件的componentDidShow中手动调用子组件对应的生命周期。

-- issues

HOC组件:

function title(iTitle='') {

return function (WrappedComponent){

return class extends Component{

static displayName=`title(${WrappedComponent.displayName})`

componentDidShow(){

tryToCall(this.wrappedRef.componentDidShow, this.wrappedRef)

}

render(){

return { this.wrappedRef = ref }} {...this.props} />

}

}

}

}

复制代码

tryToC遇新是直朋能到分览支体调all.js

/**

* 尝试调用函数

*

* @param {function} func 调用的函数

* @param {any} ctx 调用上下文

* @param {...any} args 函数调用参数

* @returns {any} returnValue

*/

export const tryToCall = (func, ctx = null, ...args) => {

if (!func) return

if (ctx) {

return func.apply(ctx, args)

} else {

return func(...args)

}

}

复制代码注意,如果使用了Mobx,请将HOC组件设置在最外层

@title("课程详情") // 请将HOC组件设置在最外层

@inject('loginStore','userStore')

@observer

复制代码