iplaycodex

iplaycodex 查看完整档案

上海编辑陕西理工学院  |  自动化 编辑1药网  |  FE 编辑 iplaycodex.com 编辑
编辑

专注前端,不只前端

个人动态

iplaycodex 发布了文章 · 2020-10-30

Web优化之离线包

作者:iplaycodex
仓库:githubcodePen
博客:掘金segmentfault知乎简书博客园leetcode
公众号:FEZONE
联系我:iplaycodex@163.com
特别声明:原创不易,未经授权不得对此文章进行转载或抄袭,否则按侵权处理,如需转载或开通公众号白名单可联系我,尊重原创尊重知识产权从我做起

1. 写在前面

现在混合开发的应用场景越来越多了.业内的解决方案也有很多,例:native + react-native的,支付宝或者微信的native + 小程序的.当然应用更多的还是native + webView这种场景.
使用native + webView的优点很多:

  • 开发方便
  • 方便快速迭代
  • ...

但是使用这套方案也有一个很致命的缺点:那就是很慢!,在native上点击了一个按钮触发一个打开webViewaction操作,会经过以下几个过程:

初始化webview => 请求HTML,JS,CSS等静态资源 => 渲染模板 => 请求API

这中间的时间很久.经过测试我们项目在安卓低端机上表现为平均加载完成时间为 4 ~ 5 秒.这是非常难以接受的!所以优化的需求就迫在眉睫了.

优化的地方很多,本篇先介绍一下资源静态化!

  • 使用静态化会将HTMLCSS以及JS保存在 APP 的沙盒中.当需要打开h5页面的时候直接从沙盒中通过file:读取,如此速度会大大提升!几乎可以做到近秒开.提升非常明显.

2. 如何做?

参见下面的 2 个流程图:

  • APP 启动流程图

APP启动流程图

  • APP 中页面跳转流程图

3. 注意事项:

3.1. 登录态等数据存取使用cookie

3.2. 外链必须注明请求协议.例:https:

因为在内置包环境,打开html使用的是file:协议,故所有外链都必须写明资源协议,否则默认为file:.例:

//bad
<script data-original="//baidu.com/jquery.js"></script>

//good
<script data-original="https://baidu.com/jquery.js"></script>

3.3. 页面跳转

模块内的页面跳转使用vue-router来实现,此处不再赘述.而模块间的页面跳转则需要使用 全路径.例:

<button @click="pushToOtherModule">跳转到其他模块</button>
methods:{
    pushToOtherModule(){
        // pushToOtherModule
        window.location.href = "http://baidu.com/web/h5/other/index.html#/goods/1";
    }
}

3.4. 跨域

使用file:协议加载html会导致跨域问题.该问题通过运维配置nginx已解决

3.5. 打包优化

webpack的图片处理,字体处理,以及dllPlugin,treeshaking等此处不在赘述.具体参见官方文档.

4. 名词解释

4.1. 内置包升级

通过npm打包成zip包上传后台即可

4.2. 开关

通过开关可以方便控制APP走内置包还是走服务器,方便一键切换

4.3. 白名单

白名单的作用是用来映射URL,即当用户触发一个URL全链接跳转的请求时,APP会进行拦截.通过匹配白名单,即可知道目标页面是走内置包还是走HTTP请求.


大致的思路目前就是这样,实现起来也不是很难.对于性能提升却是质的飞跃,所以强烈推荐.此文档登录态维护在APP端,故登录态没有详述.这个也不难,读者自己思考即可.

5. 结束语

❤️ 关注 + 点赞 + 收藏 + 评论 + 转发 ❤️
原创不易,鼓励笔者创作更好的文章~

查看原文

赞 0 收藏 0 评论 0

iplaycodex 发布了文章 · 2020-10-30

一文解决 React-Native 屏幕适配的问题

作者:iplaycodex
仓库:githubcodePen
博客:掘金segmentfault知乎简书博客园leetcode
公众号:FEZONE
联系我:iplaycodex@163.com
特别声明:原创不易,未经授权不得对此文章进行转载或抄袭,否则按侵权处理,如需转载或开通公众号白名单可联系我,尊重原创尊重知识产权从我做起

1. 前言

在使用react-native进行开发的时候我们参见官方文档知道做屏幕适配是使用flexBox来进行布局.

戳我查看 flexBox 布局

有关flexBox的属性这里不做太多介绍,不会的请参考官方文档.这里只是说一下在做屏幕适配的时候发现仅仅使用 flexBox 还有点不太够用~

react-native 中我们使用 StyleSheet 这个对象来进行样式的开发.示例代码如下所示:

import { StyleSheet } from "react-native";

// 声明了一个style的变量,使用它来给组件添加样式
let style = StyleSheet.crate({
    title: {
        fontSize: 14,
        color: "#BBB",
    },
    subTitle: {
        marginTop: 10,
        marginBottom: 10,
        paddingLeft: 10,
        paddingRight: 10,
    },
});

可以看到在react-native中写样式和在web中写css还是有很大的区别的.哪些好用的less,sass等基本上不可以用.而且也不可以用复合样式.例如:

web 中写样式

/* web */
.title {
    padding: 10 20 15 5;
}

react-native 中写样式

/* react-native */
title:{
    paddingTop:10,
    paddingRight:20,
    paddingBottom:15,
    paddingLeft:5
}

可以看到在rn中写样式还是有点麻烦~

2. 使用flexbox布局

flexBox给我们提供了很方便的布局方法,但是有时候我们还是需要一些常规属性,例如:width,height,paddingTop,fontSize等等...因为在rn中样式是没有单位的(默认dp),那么这个时候问题就来了,在不同的屏幕上它的dpi是不同的,如何做适配呢?

通过查看官方文档,找到了解决方法.封装了一个方法dp2px,代码如下所示:

import { Dimensions } from "react-native";
const deviceWidthDp = Dimensions.get("window").width;
// 默认设计稿375
const uiWidthPx = 375;
function dp2px(uiElementPx) {
    return (uiElementPx * deviceWidthDp) / uiWidthPx;
}
export default dp2px;

这样在开发中如果需要使用一些宽度,高度等属性的时候直接引用这个方法就可以了.如下所示:

import dp2px from './dp2px';

title:{
    paddingTop:dp2px(10),
    paddingRight:dp2px(20),
    paddingBottom:dp2px(15),
    paddingLeft:dp2px(5)
}

这样就完成了适配的工作.但是这个就是最优解了么,显然不是.每次写样式的都需要把这个函数引用进来,而且每次都要写大量的dp2xp,实在是非常的麻烦.那么问题来了,我们如何优化?

3. 封装 CustomStyleSheet 代替原生 StyleSheet

通过翻看源码,发现StyleSheet不是一个类,我们不需要继承它,重写它的这个方法,只需要自己封装一个类似StyleSheet这样的一个函数在它的内部进行一些计算,然后在需要写样式的地方,统一使用我们的CustomStyleSheet代替原生的StyleSheet即可.代码如下所示:

import { StyleSheet } from "react-native";
import dp2px from "./dp2px";

let MyStyleSheet = {
    create(style) {
        let s = { ...style };
        // 目前仅对以下的属性进行处理
        let list = [
            "width",
            "height",
            "marginTop",
            "marginBottom",
            "marginLeft",
            "marginRight",
            "paddingTop",
            "paddingRight",
            "paddingBottom",
            "paddingLeft",
            "top",
            "right",
            "bottom",
            "left",
            "fontSize",
            "lineHeight",
        ];
        for (outKey in s) {
            for (innerKey in s[outKey]) {
                if (
                    list.includes(innerKey) &&
                    typeof s[outKey][innerKey] == "number"
                ) {
                    s[outKey][innerKey] = px2dp(s[outKey][innerKey]);
                }
            }
        }
        return StyleSheet.create(s);
    },
};
export default MyStyleSheet;

通过上述封装后使用起来就很方便了.在react-native组件中直接使用它来代替原生的StyleSheet即可.例如:

import MyStyleSheet from "./myStyleSheet";

// 使用封装好的MyStyleSheet来代替原生StyleSheet,直接写数字即可自动转换为不同屏幕适配的dp
let style = MyStyleSheet.create({
    title: {
        fontSize: 14,
        width: 100,
    },
    subTitle: {
        paddingTop: 10,
        paddingBottom: 10,
        marginTop: 10,
        marginBottom: 10,
    },
});

至此,结束.附上相关资料,供学习

参考资料:

阮一峰的 Flex 教程

4. 结束语

❤️ 关注 + 点赞 + 收藏 + 评论 + 转发 ❤️
原创不易,鼓励笔者创作更好的文章~

查看原文

赞 2 收藏 2 评论 0

iplaycodex 发布了文章 · 2020-10-30

React-Native混合开发之热更新的实现

作者:iplaycodex
仓库:githubcodePen
博客:掘金segmentfault知乎简书博客园leetcode
公众号:FEZONE
联系我:iplaycodex@163.com
特别声明:原创不易,未经授权不得对此文章进行转载或抄袭,否则按侵权处理,如需转载或开通公众号白名单可联系我,尊重原创尊重知识产权从我做起

1. 前言

react-native可以独立写 APP,但是在更多的公司中以混合开发模式居多.也就是说部分模块使用native去开发,部分模块使用react-native来进行开发.这种开发模式带来的优点是显而易见的,native+react-native可以在处理某些更新频繁,突发性需求或者对 Ui 页面灵活性要求比较高的地方.例如618,双11,双12...这种页面通常都有具有很大的灵活性.如果这个时候我们都用native来实现则灵活性欠佳.而使用native+react-native的混合开发模式则可以完美的解决这个问题.静默升级,用户体验佳.且iOS不用发版,不用提交审即可更新,大大的提高了产品的迭代速度,为用户带来更好的体验

2. HOW

具体怎么做呢?首先当然是我们需要打包各平台对应的bundle包.如何打包,参见上一篇文章:react-native优化之拆包.下面的是已经打包好的图示:

  • iOS
    iOS包
  • android

可以看到针对iosandroid两个平台我们都已经打包出来的各自的bundle包和静态资源.

这里对文件做一下解释说明:

  • base.bundle这个是项目中的基础包,也是上面所说的react-native优化之拆包中的基础包.此包中包含react的一些基础依赖,例如:react,react-native,react-navigation,redux等底层基础依赖
  • bus.bundle则是业务包.它是动态的,会升级的比较频繁.一般基础包会持久化在 APP 的沙盒中,基本上处于静止状态,不做更新,除非有大的版本更新,才做基础包更新.
  • assets这个是 iOS 平台依赖的图片静态资源.内含在react-native中使用的@2x图和@3x
  • drawable-xhdpidrawable-xxhdpi这个是安卓平台依赖的图片资源

在实际应用中我们一般会将bus.bundleassets或者drawable-xhdpi(drawable-xxhdpi)打包成为一个 ZIP,一来这样体积更小,在 APP 上下载也更快,二来这样可以把bundle静态资源打包到一起,更新的时候直接下载这个 ZIP,解压缩即可

2.1. 问题

这样其实就完成了react-nativeiOSandroid中的热更新.但是理想是美好的,现实是残酷的.这里把我踩到的坑分享一下

2.2. iOS

iOS 接入很正常没有问题,没有任何毛病.按照上面所述直接接入就可以了,比较简单

2.3. Android

安卓有坑!而且这个坑很大!网上资料比较少.当时做 rn 拆包的时候参考官方文档的打包代码如下所示:

node ./node_modules/react-native/local-cli/cli.js bundle --platform android --dev false --entry-file index.js --bundle-output ./release-android/myCenter.bundle --assets-dest ./release-android/ --config bus.config.js

这个时候我把bundle静态资源(图片)放在了安卓的:

(android) => (app) => (src) => (main) => (assets) => rn(新建的);

一切都看起来这么顺利这么美好,跑起来瞅瞅:
发现问题:所有的图片都不展示!

经过各种翻看文档,发现要把图片解压缩在:android => app => src => main => res => drawable-xhdpi或者drawable-xxhdpi里.遂尝试之.重新跑一下,成功显示!

遂告诉android开发只需要执行下载更新的时候把 zip 下载完毕了以后把图片解压缩到这个目录里面问题就解决了!然而安卓开发给我反馈了一个令人沮丧的消息,这个目录是只读的!Excuse Me!!!只读,特么的逗我?

没想到这个方案也不行,真是坑爹啊!react-native官网也不见有提示说混合开发的图片资源放哪里啊.这可咋整!吐槽完毕之后问题还是要解决的,经过不懈的各种查看文档,到处google,stackoverflow冲浪,终于功夫不费有心人,找到了解决方案:
安卓需要把更新包解压缩至 sdcard 这个目录里!!!

3. 热更新终极解决方案

踩了这么多的坑,热更新的解决方案终于落地了:

  • 安卓接入react-native的初始版本安卓会将基础包和业务包放在assets中.然后当服务器上有 ZIP 的更新的时候会静默自动下载 ZIP 包,解压缩至sdcard这个目录里.缓存起来.以后每次启动的时候就直接加载sdcard中的bundle.至此即完成了混合开发中安卓端的热更新.
  • iOS则就比较简单了,看上面所述即可.直接解压缩到沙盒目录中即可.当然肯定不能放到可以被用户手动清除到的地方.例如:cache目录.

至此:react-native的混合开发之热更新就解决完毕了.有什么问题可以留言或者给我发邮件都可以.


参考资料:
混合开发是如何实现热更新的
react-native 热更新实现

4. 结束语

❤️ 关注 + 点赞 + 收藏 + 评论 + 转发 ❤️
原创不易,鼓励笔者创作更好的文章~

查看原文

赞 0 收藏 0 评论 0

iplaycodex 发布了文章 · 2020-10-30

修改React-Native组件的默认属性

作者:iplaycodex
仓库:githubcodePen
博客:掘金segmentfault知乎简书博客园leetcode
公众号:FEZONE
联系我:iplaycodex@163.com
特别声明:原创不易,未经授权不得对此文章进行转载或抄袭,否则按侵权处理,如需转载或开通公众号白名单可联系我,尊重原创尊重知识产权从我做起

1. 问题

我们在做网页开发的时候都知道标签有默认样式,例如<ul/>,<li/>等等.所以一般我们在开发项目的时候首先要做的就是先把标签的默认样式给清除掉.例如使用reset.css || normalize.css.但在开发 RN 的时候发现有些组件的默认属性很烦人.同样的需要重写这些默认属性.例如:

<Text /> <TextInput />

这两个组件的有个属性 allowFontScaling=true即:属性默认跟随系统字体大小,超级坑爹.

还有这个组件:

<TouchableOpacity />

这个组件默认点击的时候会有一个阴影效果,因为它的默认透明度是0.2.

这些默认属性有时候会给我们带来很大的困扰,有些组件的属性默认值并不是我们想要的.那么该怎么做呢?在每次使用这个组件的时候手动修改该组件的属性值?

这样做可以满足需求,但是太蠢了.每次使用上述组件的时候都要修改某些属性值.太蠢.这个方法舍弃.

2. 解决之道:

在开发web的时候我们可以修改标签属性的默认值,比较常用的有:reset.css或者normalize.css.那么在开发RN的时候我们可以修改组件的属性的默认值吗?答案是当然可以的啦.通过查看源码发现通过如下修改,即可覆写react-native的原生组件的属性的默认值:

  • 新建一个JS文件,代码如下所示:
import { Text, TextInput, TouchableOpacity } from "react-native";
/**
 * 说明:此文件为修改React-native的原生组件的一些默认属性配置
 * 1.修改Text和TextInput的属性,字体大小不跟随系统设置
 * 2.修改TouchableOpacity的默认属性0.2 => 1(即去除该组件默认的按下去的阴影效果 => 点击的时候按下去没有阴影效果)
 */
TextInput.defaultProps = Object.assign({}, TextInput.defaultProps, {
    allowFontScaling: false,
});
Text.defaultProps = Object.assign({}, Text.defaultProps, {
    allowFontScaling: false,
});
TouchableOpacity.defaultProps = Object.assign(
    {},
    TouchableOpacity.defaultProps,
    { activeOpacity: 1 }
);

这里修改了 3 个常用组件的默认值

  • 2.在RN项目的入口处导入即可.我是在index.js中导入.
// in index.js
import './customComponentsConfig.js';

通过上述操作,即可重写掉react-native中组件的默认属性值.以上只是举例,根据自己的需求扩展即可.如果有问题,请翻看源码.

3. 结束语

❤️ 关注 + 点赞 + 收藏 + 评论 + 转发 ❤️
原创不易,鼓励笔者创作更好的文章~

查看原文

赞 0 收藏 0 评论 0

iplaycodex 发布了文章 · 2020-10-30

修改homebrew源解决下载速度慢的问题

作者:iplaycodex
仓库:githubcodePen
博客:掘金segmentfault知乎简书博客园leetcode
公众号:FEZONE
联系我:iplaycodex@163.com
特别声明:原创不易,未经授权不得对此文章进行转载或抄袭,否则按侵权处理,如需转载或开通公众号白名单可联系我,尊重原创尊重知识产权从我做起

1. 问题

今天使用 homebrew 下载软件的时候发现特别的慢(官方源因为有一道墙,大家都知道特别的慢)但是我记得我已经修改为了清华大学的源了,然而今天还是特别的慢.最后发现原来是清华大学的源坑了,修改为了中科大的源后解决了这个问题,这里记录一下.共同样掉坑的同学参考

2. 看一下那个源

# 进入 brew 的仓库根目录
cd "$(brew --repo)"

# 查看仓库地址
git remote -v

# 如下所示,目前是清华大学源
origin    https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git (fetch)
origin    https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git (push)

打开清华大学的源的仓库,发现 404,坑了.

404 not found

清华大学的源不能用了,那就换一个源.这里我们换成中科大的源

3. 修改源

执行以下命令:

# 进入 brew 的仓库根目录
cd "$(brew --repo)"

# 修改为中科大的源
git remote set-url origin https://mirrors.ustc.edu.cn/brew.git

同理,修改 homebrew-caskhomebrew-corehomebrew-services 的远程仓库地址:

cd "$(brew --repo)/Library/Taps/homebrew/homebrew-cask"
git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-cask.git

cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git

修改完仓库地址后,更新一下,加上 -v参数可以看到当前跑的进度:

brew update -v

将源修改为中科大的源后再安装软件发现熟悉而飞快的速度又回来啦~

4. 结束语

❤️ 关注 + 点赞 + 收藏 + 评论 + 转发 ❤️
原创不易,鼓励笔者创作更好的文章~

查看原文

赞 0 收藏 0 评论 0

iplaycodex 发布了文章 · 2020-10-30

跟我学发布自己的第一个npm包

作者:iplaycodex
仓库:githubcodePen
博客:掘金segmentfault知乎简书博客园leetcode
公众号:FEZONE
联系我:iplaycodex@163.com
特别声明:原创不易,未经授权不得对此文章进行转载或抄袭,否则按侵权处理,如需转载或开通公众号白名单可联系我,尊重原创尊重知识产权从我做起

1. 前言

npm 是什么这里不必再多说,我相信现在做前端的没有不知道的.这里就不在赘述了.
我们平时开发中肯定是有很多可复用的类库或者组件的,那么把他们抽离出来复用就很有必要了,可以大大减少我们的工作量.下面简单介绍一下如何把一个包发布到 npm

2. 工具

首先我们安装一下好用的工具
  • nvm

    • 管理node的版本的一个工具,如何安装和使用自行搜索
  • nrm

    • 可以方便的切换npm源的一个工具.因为在国内npm的官方源经常网络连接不稳当,使用cnpm又会出现一个莫名其妙的 bug.故这里强力建议使用该工具来管理npm的源.且这个工具可以配置自定义源地址,方便我们搭建自己的私有 npm
上述两个工具的使用这里不再赘述,自己搜搜

3. 初始化一个 npm 包

3.1. 创建一个示例包

// step 1
cd yourDic
// step 2
mkdir myFirstNpmPackage
// step 3
cd myFristNpmPackage
// step 4
npm init

3.2. npm init

{
    "name": "myFristNpmPackage",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}

入口文件是index.js,接下来我们再新建一个index.js

3.3. create index.js

export default printHelloWorld = () => {
    console.log("hello world!");
};

RT

4. 注册 npm 账号

注册一个 npm 账号,不再赘述

5. 发布

上面那个最简单的项目,我们打算发布到npm上,进入项目目录:

5.1. 确认是否官方源

上面已经安装了nrm,一般我们在开发的时候会切到taobao源或者是自己搭建的私有源.但是发布的时候需要切换到官方源.

// step 1: change to npm
nrm use npm

// step 2: 登录,输入账号密码即可
npm loing

// step 3: 查看包名是否被占用,如果没有被占用即可发布,如果被占用了则需要更换新的包名
npm search myFristNpmPackage

// step 4: 发布
npm publish

6. 完成发布

这样就完成了一个包的发布,其实也是很简单的

7. 如何使用

当你完成了包的发布后,后面就是如何使用这个包了,当然也很简单:

// install myFristNpmPackage
npm i myFristNpmPackage --save

这样就一个简单的npm包就发布完毕了,还是很简单的~

8. 结束语

❤️ 关注 + 点赞 + 收藏 + 评论 + 转发 ❤️
原创不易,鼓励笔者创作更好的文章~

查看原文

赞 1 收藏 0 评论 0

iplaycodex 发布了文章 · 2020-10-30

记一次微信小程序转字节跳动小程序的经验

作者:iplaycodex
仓库:githubcodePen
博客:掘金segmentfault知乎简书博客园leetcode
公众号:FEZONE
联系我:iplaycodex@163.com
特别声明:原创不易,未经授权不得对此文章进行转载或抄袭,否则按侵权处理,如需转载或开通公众号白名单可联系我,尊重原创尊重知识产权从我做起

1. 前言

公司最近有个需求是把已经存在的用微信原生开发的微信小程序转为字节跳动小程序(以下简称头条小程序).因为给的开发时间太短,重写基本不可能.遂 google 寻找可以方便快速将微信小程序转为头条小程序的方法.现将整个过程归纳总结如下,方便没有做过的同学可以快速上手,也方便自己记录.毕竟好记性不如烂笔头~Orz...

2. 准备工作

  • 1.申请字节跳动开发者账号
  • 2.申请头条小程序,配置相关账号权限
  • 3.小程序类别如果为特殊类别,确认是否需要相关资质
  • 4.配置相关域名,注意:必须为https
  • 5.主体认证申请
  • 6.申请开通支付
  • 7.下载开发工具

3. 技术选型

3.1. 如何做?

上面已经说了,从 0 开发是不可能的.所以我们需要一个工具可以把小程序的源码转为头条小程序的代码.经过各方调研,有以下三种工具.

3.2. taro? uniApp? wx2bat?

名称特性语法风格官网
taro京东出品,一种类react的语法的小程序开发框架,支持一套代码转为微信小程序,H5,百度小程序,支付宝小程序,快应用,ReactNative,字节跳动小程序,QQ 轻应用.可以看到功能还是很强大的,并且支持将原生开发的微信小程序转为taro小程序reacthttps://taro.aotu.io/
uniApp也是宣称一套代码打包为不同平台的东西,是一种类vue语法的实现.文档没有taro写得好,目前社区也没有其他框架成熟.了解不是很多,这里就不在赘述了vuehttps://uniapp.dcloud.io/
wx2bat自己开发,使用最简单的一个工具,它主要做的事情:将 wxml 后缀名改为 ttml,将 wxss 后缀名改为 ttss,将 wxmlwx: 改为 tt,将 jswx: 改为 tt:.同时支持转为百度小程序,支付宝小程序各个平台的原生语法https://www.npmjs.com/package/wx2bat

总结:
经过上面的分析和总结,我们可以得出一个结论:上述 3 种转换方式大概的实现思路如下所示:

  • tarouniApp

  • wx2bat

1.可以看到使用wx2bat优点是比较快速方便,省了中间层的代码.而tarouniApp则加了一层虽然比较麻烦,但是却可以支持更多的平台.

2.经过本人实践(只试验了 taro),发现错误很多,转换的代码编译后有漏文件的现象,而且错误频频,不停的再解决BUG.考虑到开发时间不充足,遂考虑使用wx2bat来做转换.

实操下来发现成本较低,有一些简单的语法不兼容,稍微修修改改项目就可以快速的跑起来.遂采用wx2bat来解决此次需求

3.3. 转换结果

通过wx2bat我们已经可以方便快速的将微信小程序转为头条小程序了.一些修改的细节参见我的github或者npm或者个人站,地址如下所示:
iplaycodex

3.4. 遇到的坑

虽然说头条小程序的90%的api 和微信小程序是差不多的,但是还是有一些差异性.需要我们进行手动修改.现归纳总结如下所示:
  • 微信小程序的 .wxs 后缀文件在头条小程序中不支持!
  • 上面已经说了头条小程序 .wxs文件不支持.那自然.wxs中声明的函数在模板中是不能使用的
  • 头条小程序不支持在 {{插槽}}中使用函数,更别说过滤器这种东西了,这一点特别坑!
  • 微信小程序互跳的相关逻辑代码需要删除!(即A 微信小程序打开 B 微信小程序)
  • 微信,wechat等微信的关键字要全部删掉,否则可能会审核被拒
  • 获取用户数据的按钮上的 bindgetuserinfo 方法不支持,需要改为普通的bindtap
  • 授权登录这里和微信小程序差不多,不需要过多的修改~
  • 支付的话,头条小程序支持的比较多,例如支付宝.这里需要根据需求自行修改
  • 如果你的项目中有搜索框需要接入敏感词过滤!!!(我们的项目因为这个审核被拒)
  • 对于用户输入非法提醒的toast不能自己随意写,要写头条给的提醒文本,例:因相关法律和要求,相关搜索结果不予展示
  • 等等...

4. 总结

到这里项目应该已经可以差不多跑起来了,通过在转换后的头条小程序代码上修修改改进行二次开发,可以很快速的将微信小程序转为头条小程序.接下来就是需要对整个项目进行回归测试了~这里就不再赘述了~

5. 参考文档

微信小程序官方文档
字节跳动小程序官方文档
wx2bat文档

6. 结束语

❤️ 关注 + 点赞 + 收藏 + 评论 + 转发 ❤️
原创不易,鼓励笔者创作更好的文章~

查看原文

赞 0 收藏 0 评论 1

iplaycodex 关注了专栏 · 2020-10-20

SegmentFault 行业快讯

第一时间为开发者提供行业相关的实时热点资讯

关注 58916

iplaycodex 关注了专栏 · 2020-10-20

进击的大前端

前端工程师,底层技术人。 思否2020年度“Top Writer”! 掘金“优秀作者”! 开源中国2020年度“优秀源创作者” 分享各种大前端进阶知识! 关注公众号【进击的大前端】第一时间获取高质量原创。 更多文章和示例源码请看:https://github.com/dennis-jiang/Front-End-Knowledges

关注 13085

iplaycodex 关注了专栏 · 2020-10-20

前端森林公众号

一个有温度的前端号,关注行业前沿。从基础到架构,携手你我共同成长。

关注 9899

认证与成就

  • 获得 3 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2020-08-11
个人主页被 459 人浏览