05-Taro开发微信H5记录

发表于 2019-10-31 | 分类于前端-12-微信小程序

本文记录Taro开发H5项目中存在的一些问题,不局限于Taro本身,其他方面的问题也记录在此

1 设置镜像源

mirror-config-china

mirror-config-china 会在 npm用户配置文件(~/.npmrc)写入一系列镜像配置,包括registry=https://registry.npmjs.org,
如果你想切换到官方npm源,请用命令npm config set registry https://registry.npmjs.org

如果你项目中用的yarn,那么mirror-config-china这个包好像就没啥用了,因为yarn修改配置是用的.yarnrc,而不是.npmrc

2 内置环境变量

process.env.TARO_ENV

weapp
swan
alipay
h5
rn
tt
qq
quickapp

3 小程序原生作用域获取

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

官网文档

4 eslint调整

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 自定义eslint规则

由于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 Taro更新问题

windows系统建议使用管理员权限运行cmd窗口
建议 npm i -g @tarojs/cli@latest 更新,不使用 taro update self(试过两次均不成功)

8 微信公众号相关问题

101-webpack怎么使用微信sdk
微信公众号登录:跳转认证页时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,无法触发componentDidShow

目前，在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 <WrappedComponent ref={ref => { this.wrappedRef = ref }} {...this.props} />
      } 
    }
  }
}

tryToCall.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组件设置在最外层
1
2
3
4
> @title("课程详情") // 请将HOC组件设置在最外层
> @inject('loginStore','userStore')
> @observer
>

10-git删除本地分支和删除远程分支

发表于 2019-10-31 | 分类于前端-10-git

具体操作：

我现在在dev20181018分支上，想删除dev20181018分支

先切换到别的分支: git checkout dev20180927
删除本地分支： git branch -d dev20181018
如果删除不了可以强制删除，git branch -D dev20181018
有必要的情况下，删除远程分支：git push origin --delete dev20181018
在从公用的仓库fetch代码：git fetch origin dev20181018:dev20181018
然后切换分支即可：git checkout dev20181018

注：上述操作是删除个人本地和个人远程分支，如果只删除个人本地，请忽略第4步

16-Mac ssh 免密码登录 Mac 或者 Linux

发表于 2019-10-31 | 分类于前端-13-Linux

最近在 Mac上操作另一台 Mac 和 Linux 服务器，每次输密码太麻烦。所以直接设置 ssh 免密码登录，省去输入密码的过程。

先在本机执行 ls ~/.ssh 若不存在 id_rsa，id_rsa.pub 公钥文件，可执行如下命令即可生成。

1	ssh-keygen -t rsa

将其中 id_rsa.pub 需要传送到 Mac 或者 Linux 服务器的 ~/.ssh 目录下，并重命名为 authorized_keys ，若 authorized_keys 已经存在则换行添加 id_rsa.pub 里面的公钥即可。

这样你就可以直接免密登录你的 Mac 或者 Linux 服务器了。

1	ssh root@172.16.30.31

如果你发现没能成功的话，那么修改文件 authorized_keys 的权限为600即可

1	chmod 600 ~/.ssh/authorized_keys

2 通过ssh-copy-id传送密钥

使用ssh-copy-id -i ~/.ssh/id_rsa.pub root@$ipaddress将公钥发送到网站服务器，记得将IP地址填入，需要输入网站服务器的密码。

参考地址

18-jenkins相关默认路径

发表于 2019-10-31 | 分类于前端-13-Linux

安装完成后，有如下相关目录：

/usr/lib/jenkins/：jenkins安装目录，WAR包会放在这里。
/etc/sysconfig/jenkins：jenkins配置文件，“端口”，“JENKINS_HOME”等都可以在这里配置。
/var/lib/jenkins/：默认的JENKINS_HOME。
/var/log/jenkins/jenkins.log：Jenkins日志文件。

101-webpack怎么使用微信sdk

发表于 2019-10-31 | 分类于前端-02-js基础复习

将开头代码

1	!function(e,n){"function"==typeof define&&(define.amd\|\|define.cmd)?define(function(){return n(e)}):n(e,!0)}(this,

改为:

1	!function(e,n){module.exports=n(e,!0)}(window,

参考地址

102-npm更新项目依赖

发表于 2019-10-31 | 分类于前端-02-js基础复习

更新全局包：

1	npm update <name> -g

更新生产环境依赖包：

1	npm update <name> --save

更新开发环境依赖包：

1	npm update <name> --save-dev

yarn升级依赖

103-export和module.export的区别

发表于 2019-10-31 | 分类于前端-02-js基础复习

// hello.js
funciton hello () {
    console.log('hello');
}

export.hello = hello;

var aaa = require('hello.js');
aaa.hello();    // console.log('hello');

module.export = hello;

var aaa = require('hello.js');
aaa();      // console.log('hello');

104-图片懒加载

发表于 2019-10-31 | 分类于前端-02-js基础复习

let imgList = document.querySelectorAll('img'); // 获取页面中所有img对象
 
let observer = new IntersectionObserver(entries => {
	entries.forEach(entry => {
		if (entry.intersectionRatio > 0 && entry.intersectionRatio <= 1) {
		    // intersectionRatio 表示相交区域和目标元素的比例值 
		    // 也可以用sIntersecting 目标元素当前是否可见 Boolean值 可见为true
			entry.target.src = entry.target.dataset.src
			// 图片进入进入可见区域， 则赋予data-src值给src属性
			observer.unobserve(entry.target)
			// 图片已加载， 解除观察
		}
	})
})
imgList.forEach(img => {
	observer.observe(img); // 观察每一个图片对象
})

105-移动端input键盘落下，页面未落下

发表于 2019-10-31 | 分类于前端-02-js基础复习

移动端项目，当前页面只有一个输入框，填充内容后，点击提交，键盘落下，页面未落下
后续会有弹框，页面如果未落下，则弹框展示有问题，切点击弹框按钮不起作用

解决方案

第一种

1
2
3

$("input").on("blur",function(){
    window.scroll(0,0);//失焦后强制让页面归位
});

第二种

<input v-model="code" type="text" 
@focus="isDown = false" @blur="downKey()" 
placeholder="请输入兑换码">

// data 定义
isDown: true
// 收回键盘
      downKey() {
        let timer = setTimeout(() => {
          clearTimeout(timer)
          document.documentElement.scrollTop = document.body.scrollHeight
          document.body.scrollTop = document.body.scrollHeight
          this.isDown = true
        }, 20)
      }
      
  // 点击兑换
  change() {
        if(!this.isDown) this.downKey()
        // xxxxx
  }

如果只给input加失焦事件，用户输入完数据，直接点击按钮，则失焦事件可能不起作用，所以需要在提交事件中增加判断。

17-CentOS7 安装 Jenkins

发表于 2019-08-31 | 分类于前端-13-Linux

1 准备工作

1.1 安装docker

1、使用 sudo 或 root 权限登录 Centos。

2、确保 yum 包更新到最新。

1	sudo yum update

3、安装一些必要的系统工具：

1	sudo yum install -y yum-utils device-mapper-persistent-data lvm2

4、添加软件源信息(设置稳定的存储库信息)：

1	sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

5、更新 yum 缓存：

1	sudo yum makecache fast

6、安装 Docker-ce：

1	sudo yum -y install docker-ce

7、启动 Docker 后台服务

1	sudo systemctl start docker

1.2 yum安装jdk8

1、查看yum源中是否有相关套件

1	yum -y list java*

2、这里我们选择java-1.8.0-openjdk-devel.x86_64

1	yum -y install java-1.8.0-openjdk-devel.x86_64

3、修改 /etc/profile

在文件最后输入

# JAVA
JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk-1.8.0.222.b10-0.el7_6.x86_64
JRE_HOME=$JAVA_HOME/jre
PATH=$PATH:$JAVA_HOME/bin
CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
export JAVA_HOME
export JRE_HOME
export PATH
export CLASSPATH

图中圆圈目录可能不一致,具体请看电脑安装目录

4、更新环境变量

1	source /etc/profile

2 安装Jenkins

2.1 Docker安装

docker run \
  -u root \
  --name jenkins \
  -d \
  -p 8080:8080 \
  -p 50000:50000 \
  -v /var/jenkins-data:/var/jenkins_home \
  -v /var/run/docker.sock:/var/run/docker.sock \
  jenkinsci/blueocean

-d表示在后台运行容器（即“分离”模式）并输出容器ID
-v /var/jenkins-data:/var/jenkins_home
表示映射容器中的/var/jenkins_home 目录到/var/jenkins-data 的volume,这样,我们就可以不用进入docker容器里面查看jenkins_home目录,直接在本机/var/jenkins-data查看该目录下的文件即可
--name jenkins将容器命名jenkins,方便后面操作容器

启动完成后面请看-> 第三步操作安装向导

2.2 其他操作

访问Jenkins / Blue Ocean Docker容器

1	docker exec -it jenkins bash

这里的jenkins就是上面--name jenkins的设置命名

通过Docker日志访问Jenkins控制台日志

1	docker logs <docker-container-name>

3 安装向导

3.1 解锁 Jenkins

浏览 http://服务器ip:8080

然后到命令窗口打印出log信息并复制密码

1	docker logs jenkins

在 解锁Jenkins 页面, 粘贴该密码到管理员密码**输入框并点击继续

3.2 安装插件

4 Coding新建个node项目

Jenkinsfile

pipeline {
    agent {
        docker {
            image 'node:10-alpine' 
            args '-p 3000:3000' 
        }
    }
    stages {
        stage('yarn') { 
            steps {
                sh 'npm i -g yarn' 
            }
        }
        stage('taro') { 
            steps {
                sh 'yarn global add @tarojs/cli@1.3.14' 
            }
        }
        stage('install') { 
            steps {
                sh 'yarn' 
            }
        }
        stage('build') { 
            steps {
                sh 'npm run build:h5' 
            }
        }
    }
}

5 在Jenkins中创建流水线项目

轮询SCM：只要SVN或Git中数据有更新，则执行构建任务

构建语法说明：

首先格式为：* * * * *（五个星）；

第一个*表示分钟，取值0~59
第二个*表示小时，取值0~23
第三个*表示一个月的第几天，取值1~31
第四个*表示第几月，取值1~12
第五个*表示一周中的第几天，取值0~7，其中0和7代表的都是周日

流水线选项

在定义，选择 Pipeline script from SCM 选项。此选项指示Jenkins从源代码管理（SCM）仓库获取你的流水线，这里的仓库就是你clone到本地的Git仓库
在 SCM 域中，选择 Git
在 Repository URL 域中，填写你本地仓库的目录路径
增加一个全局凭证

全局凭证这里你可以通过密码登录,也可以通过ssh登录,这里我选择ssh,git仓库ssh设置就不在这里赘述了

最后保存

6 查看效果

总体操作下来还是比较顺利的,网上也有很多类似的文章.生成 dist目录后,其实还需要运行scp命令发送到另外一台服务器部署,有兴趣大家可以去了解下.

菜鸟教程-Docker安装
 Docker官网-安装
 博客园-jdk安装
 jenkins官网-安装node项目