uni-merge-pages

之前有写这样一个库，通过读取 pages.json 文件内容中的 pages、subPackages 选项作为 uni-simple-router 的路由表，再借助 webpack 注入全局变量，完成一些列的操作。然而 此库刚好相反，它可以让你编写 js 模块文件 自动完成 pages.json 写入。妈妈再也不用担心配置混乱的问题啦。上手难度一颗星 阅读完安装后直接[跳入注意事项即可]()

飞机直达

• 送我去插件市场
• 送我去GItHub

安装

您可以使用 Yarn 或 npm 安装该软件包（选择一个）：

Yarn

yarn global add uni-merge-pages nodemon

npm

npm install uni-merge-pages nodemon -g

注意事项

• 使用之前请把 pages.json 中的所有内容备份到其他文件，避免覆盖文件。HBuilder X 创建页面时，即使勾选 在 pages.json 中注册 也同样无效。插件只认模块化输出的产物。
• 模块化js必须在结尾使用 ; 这样才能通知到插件更准确的捕捉。
• 目标捕捉内容默认是 const 声明，大写变量 包括：PAGES、GLOBALSTYLE、EASYCOM、TABBAR、CONDITION、SUBPACKAGES、PRELOADRULE、PAGESOTHER
• 禁止在对象最后一对 key/value 后 使用注释，如果需要注释请移步到 key/value 头部上
• 插件默认包含提取内容仅有7个，workers 默认是没包含的，如果需要写入到 pages.json 请使用 PAGESOTHER 包含
• pages.json 禁止手动往里面添加内容，因为下次热更直接会覆盖。请在模块 js 下添加。

开始使用

第一步：配置 uni.config.js 文件

在项目根目录或者任何地方新建一个 uni.config.js 文件，简单的配置一下。提供一些必要的选项即可。

// uni.config.js  
const {resolve}=require('path');  

module.exports = {  
    publicPath:'',        //预设一个公共路径  
    nodemon:{  
        watch:[     //监听当前项目根目录下的config文件目录 包括所有文件 默认只提取js文件  
            resolve(__dirname, './config/*'),  
        ],  
    }  
}

以上示例是在当前项目根目录下，如果你是新建在其他地方。那请修改 watch 路径，记住是 绝对路径。然后再通过 cli 传递 --config xxx/xxx/uni-config.js 路径即可。默认读取项目根目录下的 uni-config.js

还想更细腻一点的配置？安排

// uni.config.js  
const {resolve}=require('path');  

module.exports = {  
    publicPath:'',  
    //只提取 这三个文件中的内容作为 pages.json 中的写入物 记住绝对路径 像下面这样  
    includes: [       
        resolve(__dirname,'./config/pages.js'),  
        resolve(__dirname,'./config/tabbar.js'),  
    ],  
    //插件提取完成后 会通知你 你可以进一步修改内容 并返回给你 插件 记住一定要 next   
    transformHook:function(pagesStr,extractStr,next){     
        next(extractStr);  
    },  
    nodemon:{  
        watch:[  
            resolve(__dirname, './config/*'),  
        ],  
        //  显示更详细的日志  
        verbose: true,  
    }  
}

第二步：预设执行脚本

有两种方式实现：

第一种在当前项目根目录下执行 npm init -y 编写 scripts 脚本即可

{  
  "name": "xxxxxx",  
  "version": "1.0.0",  
  "description": "",  
  "main": "main.js",  
  "dependencies": {},  
  "devDependencies": {},  
  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1",  
    "build:pages": "uni-merge-cli"  
  },  
  "keywords": [],  
  "author": "",  
  "license": "ISC"  
}

需要使用时执行 npm run build:pages 即可。

第二种直接打开 dos cd 到项目根路径下 执行 uni-merge-cli 即可。

第三步：编写默认提取物文件代码

//config/pages.js  
const PAGES = [  
    // #ifdef APP-NVUE  
        {  
            path: "pages/index33/index333",  
            name:'index33'  
        },  
    // #endif  
    {  
        "path": "index2/index2",  
        "style": {  
            "navigationBarTitleText": "uni-app",  
        }  
    },  
];  
export default PAGES;  

//config/tabbar.js  
const TABBAR = {  
    "color": "#7A7E83",  
    "selectedColor": "#3cc51f",  
    "borderStyle": "black",  
    "backgroundColor": "#f00",  
    "list": [{  
        "pagePath": "pages/component/index",  
        "iconPath": "static/image/icon_component.png",  
        "selectedIconPath": "static/image/icon_component_HL.png",  
        "text": "组件"  
    }, {  
        "pagePath": "pages/API/index",  
        "iconPath": "static/image/icon_API.png",  
        "selectedIconPath": "static/image/icon_API_HL.png",  
        "text": "接口"  
    }]  
};  
export default TABBAR;

如果你没有预设 uni-config.js 中的 rule。请按照上面的配置进行编写，大写声明法 记住在一个声明完成的对象后面加上 ; 以便于插件精准提取。 如果不习惯这样的写法 你可以自己编写 rule 正则来提取即可。 在每个对象最后一个key/value后禁止使用注释，请移步到头部注释

额外参数写入到 pages.json

因为插件默认只有 7 个提取物。 包括：globalStyle、pages、easycom、tabBar、condition、subPackages、preloadRule。而 workers 是没有包含在内的。如果你想写入多个插件没包含的提取物进去，可以这样做。

// xxxx/config/other.js  
const PAGESOTHER= {   
    workers:'workers',  
    otherConfig:{  
        name:'hhyang'  
    }  
};

默认插件会把 PAGESOTHER 下声明的所有扁平成一个对象，平级的写入到pages.json 中

默认配置项

uni-config.js 中的配置最后会和默认配置进行合并，你可以在 uni-config.js 中编写任何你想要的代码

module.exports={  
    //预设在 pages 节点下 path 的公共路径  
    publicPath:'',       
    // 需要监听的文件目录下所包含的js文件 必须绝对路径 空则读取监听目录下的所有文件  
    includes: [],  
    // 提取文件内容的正则规则  
    rule: {  
        globalStyle: /(?<=const\s+GLOBALSTYLE\s*=\s*)\{[\s\S]*?}(?=\s*;)/,  
        pages: /(?<=const\s+PAGES\s*=\s*)\[[\s\S]*?](?=\s*;)/,  
        easycom: /(?<=const\s+EASYCOM\s*=\s*)\{[\s\S]*?}(?=\s*;)/,  
        tabBar: /(?<=const\s+TABBAR\s*=\s*)\{[\s\S]*?}(?=\s*;)/,  
        condition: /(?<=const\s+CONDITION\s*=\s*)\{[\s\S]*?}(?=\s*;)/,  
        subPackages: /(?<=const\s+SUBPACKAGES\s*=\s*)\[[\s\S]*?](?=\s*;)/,  
        preloadRule: /(?<=const\s+PRELOADRULE\s*=\s*)\{[\s\S]*?}(?=\s*;)/,  
        pagesother:/(?<=const\s+PAGESOTHER\s*=\s*)\{[\s\S]*?}(?=\s*;)/  
    },  
    // 这些是 nodemon 的所有配置  
    nodemon:{  
        "verbose": false,  
        "execMap": {  
            "js": "node --harmony"  
        },  
        "restartable": "rs",  
        "ignore": [".git", "node_modules/*"],  
        "env": {  
            "NODE_ENV": "production"  
        },  
        "ext": "js"  
    }  
}

开发一款APP，价格私聊，做蔬菜水果电商的APP，电13139501613，扣317450836，微anjungang007

微信朋友圈分享插件（支持多图），有兴趣联系我，一起交流

uniapp 状态管理以及持久化

安装如下依赖：vuex （vuex 状态管理使用），vuex-persistedstate（状态持久化使用）

store.js ,文件内容示例

// 引入依赖  
import Vue from 'vue'  
import Vuex from 'vuex'  
import createPersistedState from 'vuex-persistedstate'  

Vue.use(Vuex)  

const state = {  
  favorites: [],  
  username:"",  
  demoxxxx: ""  
}  

export default new Vuex.Store({  
  state,  
  plugins: [  
    // 可以有多个持久化实例  
    createPersistedState({  
      key: 'app_config_data',  // 状态保存到本地的 key   
      paths: ['favorites', 'username'],  // 要持久化的状态，在state里面取，如果有嵌套，可以  a.b.c   
      storage: {  // 存储方式定义  
        getItem: (key) => uni.getStorageSync(key), // 获取  
        setItem: (key, value) => uni.setStorageSync(key, value), // 存储  
        removeItem: (key) => uni.removeStorageSync(key) // 删除  
      }  
    })  
  ]  
})

main.js 文件

import Vue from 'vue'  
import store from 'store.js' // 文件的路径自己看着办，这里只是实例  

const app = new Vue({  
  store,  // store 丢这  
  ...App  
})  
app.$mount()

示例页面，仅js部分

<script>  
import { mapState, mapMutations } from 'vuex'  
export default {  
  data:() => ({  
     demo: "demo",  
  }),  
  computed: {  
    // 映射两个状态到页面示例中，可以直接访问，实时获取state的值，更多请自行了解vuex  
    ...mapState(['username','favorites'])   
  },  
}  
</script>

解释

Q：为什么不在template里面是有$store.state.xxx进行访问，而使用 mapState ？
A：因为 uniapp 不支持(或者说只能弯道实现，在 main.js 中 Vue.$store = store)，因此使用 mapState 来访问

更多请了解

vuex-persistedstate： https://www.npmjs.com/package/vuex-persistedstate
vuex：https://vuex.vuejs.org/zh/

uni.getLocation({
type: 'wgs84',
geocode:true,//设置该参数为true可直接获取经纬度及城市信息
success: function (res) {
console.log(res)

我已申请的高德的key，真机安卓测试提示：获取地址失败，将导致部分功能不可用

奇怪的问题

> Tips:
以下讨论基于uni-app 2.0版本(v2.0.0-27920200529001)，在微信小程序中实测有效，其他平台未测试

开发中的一个需求是点击卡片跳转详情页面，卡片上有一个switch按钮，要求点击按钮时仅触发按钮的change事件不做页面跳转。

使用官方文档中的.stop事件修饰符时，发现无法阻止change事件。而若是两个click事件则可以阻止子元素向上冒泡。示例代码如下：

无效示例：

<view class="my-style" @click="goPage">  
    <switch checked @change.stop="switch1Change" />  
</view>  

有效示例：

<view class="my-style" @click="goPage">  
    <view @click.stop="switch1Change">  
        <switch checked @change="switch1Change" />  
    </view>  
</view>  

方案问题

本方案实际上是给switch元素绑定了两个事件，一个change，一个tap，并都指向了同一个method，且需要在方法中过滤click触发的事件，不够优雅。不过目前暂未有更好的解决办法。

HBuilderX2.8.0 版本开始调整uni-app默认使用v8引擎

uni-app项目中的主要业务逻辑代码都是基于js代码控制，运行在独立的js引擎中，HBuilderX2.7.14及以下版本默认使用开源项目weex自带的JavaScriptCore引擎，JavaScriptCore 是基于 JavaScriptCore 2016版 进行了裁剪，已经数年未更新。

HBuilderX2.8.0中集成的V8引擎是基于2020年5月份的8.3版本。

JS引擎对比

为了对比测试JS引擎性能及内存占用情况，我们使用简单uni-app应用进行对比测试。
在华为mete30pro测试10次平均数据如下：

亿次数组操作代码

    var start = new Date().valueOf()  
    var arr = []  
    for (var i = 0; i < 100000; i++) {  
        var arrIn = []  
        for (var j = 0; j < 1000; j++) {  
            arrIn.push(j)  
        }  
        arr.push(arr)  
    }  
    var end = new Date().valueOf()  
    console.log("耗时："+(end - start)+"ms");

性能
从测试数据看v8引擎相对于JavaScriptCore引擎有性能优势，特别是在大量数组操作方面，内存占用方面也有一些优势。

安装包大小
但使用V8引擎相对JSC引擎安装包会变大，仅包含armeabi-v7a类型cpu时约增加1.5M，同时包含armeabi-v7a和arm64类型cpu时约增加3M。

配置使用JSC引擎

云打包配置

如果对安装包大小比较在意，也可以配置继续使用JavaScriptCore引擎
打开项目的manifest.json文件，切换到“代码视图”

• uni-app项目：
  在"app-plus" -> "distribute" -> "android"节点下添加jsEngine字段
• 5+ App项目：
  不支持使用JS独立引起

    "jsEngine": "jsc"

注意：需提交云端打包才能生效

离线打包配置

离线SDK自2.8.1开始已将默认引擎切换到V8，用户可以根据自己的需求切换引擎。

注意：不同引擎的aar库不能同时使用！

把下面的复制粘贴到php代码块中即可使用，包括php标签、语言编码、请求头等代码。

复制后放到代码块的 { } 内即可：

    "p_h_p": {  
    "body": [  
        "<?php",  
        "\t$1",  
        "?>"  
    ],  
    "prefix": "php?"  
},  
"$_GET": {  
    "body": [  
        "_GET"  
    ],  
    "prefix": "$_GET"  
},  
"$_POST": {  
    "body": [  
        "_POST"  
    ],  
    "prefix": "$_POST"  
},  
"header_utf-8": {  
    "body": [  
        "header('content-type:text/html;charset=utf-8');"  
    ],  
    "prefix": "heautf"  
},  
"set_re_head": {  
    "body": [  
        "setRequestHeader('Content-type','application/x-www-form-urlencoded');"  
    ],  
    "prefix": "setrh"  
}  

【报Bug】更新完hbuild 导致打包完的h5是空白的？！

更新，中奖结果见：https://ask.dcloud.net.cn/article/37747

• 主办：DCloud
• 协办：腾讯云云开发
• 特别赞助：阿里云开发者社区

去年的插件大赛，iphone等大奖刷刷发出去，很多人后悔没有参赛，都在问下次大赛何时举行。

来了，今年的大赛，更刺激！

2020大赛，从“uni-app插件大赛”，升级为“DCloud插件大赛”，因为不止包含uni-app，还包含uniCloud和HBuilderX插件。同时还得到腾讯云、阿里云等合作伙伴的鼎力支持。

自然奖励也大幅升级喽，比去年多10倍的奖励，就问你心动不心动？

经过1年的发展，插件市场已有数千款插件，包罗了uni-app开发的方方面面。而DCloud，也已经成长为拥有500万开发者、10亿月活设备的巨型平台。

接下来，插件市场将更大幅的开放流量，让插件作者通过这个开放平台，获客、赚钱。

奖品设置

• 特等奖：
  奖品：5万元插件包销 + 旗舰手机1部（iphone 11 或 华为mate pro 5G 2选1）+ 插件市场置顶推荐1个月 + HBuilderX预置
  名额：1名
• 一等奖：
  奖品：3万元插件包销 + 旗舰手机1部（iphone 11 或 华为mate pro 5G 2选1）+ 插件市场置顶推荐半个月 + HBuilderX预置
  名额：2名
• 二等奖
  奖品：1万元插件包销 + 极客外设1台（HHKB 机械键盘 或 小米 34寸曲面显示器 2选1）+ 插件市场置顶推荐1个星期
  名额：5名
• 三等奖
  奖品：800元uniCloud代金券 + 小米13.5寸液晶小黑板
  名额：10名
• 贡献奖
  奖品：uni-app纪念马克杯 或 uni-app T恤 或 HBuilderX加长鼠标垫 3选1
  名额：32名

中奖范围50人！

“插件包销”，是指获奖插件通过插件市场销售，DCloud兜底包销。以特等奖的5万元包销为例，如果获奖插件在插件市场1年内销售额没有达到5万元，则由DCloud付差额给获奖者进行兜底。包销只针对付费插件，如免费插件获得二等奖及以上奖励，其中的包销奖励无效。

除了已支持的App原生付费插件外，插件市场新增了uniCloud付费插件，并提供了良好的版权保护。

“HBuilderX预置”，是在HBuilderX新建项目界面，可直接选择该项目模板。下图为去年获奖插件在HBuilderX预置的效果。

除上述奖品外，

• 所有获奖插件作者，都将进入DCloud VIP技术支持群，享受优先的技术支付、问题反馈。
• 所有获奖插件的集锦页面，还将通过HBuilderX工具、论坛、QQ微信群进行全量推广，给予优秀插件充分的曝光。

协办方及赞助方奖品：

腾讯云、阿里云也参与本次大赛，给插件作者提供丰富奖励。

阿里云开发者社区提供的奖品如下：

• 阿里云开发者社区cherry机械键盘 1个

• 阿里云开发者社区电脑双肩包 3个

• 阿里云开发者社区定制鼠标垫 15个

• 阿里云开发者社区文化T恤衫 15件

• 获奖插件将得到阿里云的宣传资源推广

• 获奖插件作者将得到阿里云代金券，细则见下方附录。

腾讯云云开发提供的奖品如下：

• 插件中深度集成腾讯云服务的插件作者，可获得100元腾讯云满减代金券，适用产品：OCR、人脸识别、图像处理、云直播、云点播、语音识别、语音合成、自然语言理解等，共200张。
• 使用腾讯云云开发进行插件部署，激励100元代金券（满101减100元）
• 获奖作品中，使用到腾讯云其他产品能力的可以获得腾讯云云开发公众号推荐。

协办方、赞助方的奖品发放，由赞助商的评委单独评选。细则稍后公布。

3类鼓励插件说明

1. uniCloud插件

插件市场已经有众多项目模板，但仅包含前端部分。uniCloud插件将弥补后端部分，并且这部分支持付费。
比如一个电商模板，前后端一体直接在插件市场获取，拿来就能用。

DCloud提供了云函数插件的产权保护、试用、购买。
定价方面，插件市场支持源码加密定价和源码开放定价这2种价格（目前只支持加密版销售，后续上线免密版销售）。
比如某电商模板的云函数中，有3个云函数设为加密（即源码对购买者不可见），定价500元；而全部云函数均不加密，定价1000元。
也就是对于购买者而言，可以较便宜的得到模板的使用权，但若想得到全部控制力和二次开发灵活性，则需加价购买。

DCloud提供了uni-ID和uniPay的基础件支持，插件作者将不用再自己实现用户系统和支付，直接用现成的开源基础件即可，可极大提升插件开发效率。

而对于插件使用者而言，经常需要在自己的App中整合1个电商系统和1个论坛系统。只要这些系统都基于uni-ID，就可以方便的把多个系统整合到一起，连接同一套uni-ID账户体系，为用户同时提供商品销售和论坛交流服务。

uni-ID是DCloud推荐每个云函数项目均应该使用的库，详见：https://ext.dcloud.net.cn/plugin?id=2116

除了卖应用模板，uniCloud插件还将支持卖数据服务（比如天气数据、小说数据）、卖爬虫模板，无限可能的金矿等你来发掘。

2. 有助于运营变现的前端插件

前端插件里，鼓励含 uni-AD 的插件，以帮助开发者更好的运营变现。

• 比如电子书模板阅读一定章节后，需观看激励视频。
• 比如激励视频与积分、区块链相结合的模板。
• 比如签到激励，提供帮助开发者提升留存手段的插件。

如果这些模板同时包含uniCloud，那大奖就离你非常近了:)

3. HBuilderX插件

HBuilderX包含传统意义的ide插件，比如某些字处理技巧，但不限于此。
HBuilderX将通过插件系统给所有开发者送水人释放500万开发者流量。
比如提供可视化界面设计的、提供源码托管的、提供手机测试服务的、提供持续集成的、提供团队任务管理的、提供招聘求职的.......，都可以为HBuilderX做一个插件，打通HBuilderX用户和自己服务的链路。
HBuilderX还会给插件开放一键登录（类似微信小程序里调用微信登录）。

虽然重点鼓励上述3类插件，但并非奖品只包含上述三类。只要插件做的好、用户喜欢，都有机会获奖。

大赛活动时间

• 即日起至2020年8月31日24点之前，更新插件市场插件的，均为合格参赛者。
• 2020年9月1-4日，评委评选获奖者。评选原则见下。
• 2020年9月7日，公布获奖名单并发放奖品

参赛方式

1. 注册插件市场并登陆账号，https://ext.dcloud.net.cn/
2. 点击发布插件，插件开发指南参考：https://ask.dcloud.net.cn/article/35408
3. 填写插件描述信息并提交发布

评奖参考依据

客观指标：插件的下载人数、评价、销售额、赞赏量
主观指标：插件对DCloud生态的价值
两种指标结合评定最终结果。

协办方和赞助方的奖品发放原则，由此选派的评委，另行提供。

开发插件过程中有任何问题可在DCloud官方社区提问：https://ask.dcloud.net.cn

本活动解释权归DCloud.io所有

附录1：阿里云开发者社区赞助代金券细则

阿里云提供的奖品：

• 为所有插件开发者提供免费的小程序Serverless云服务资源
• 为深度集成阿里云服务的插件获奖者提供阿里云移动研发平台EMAS产品代金券

代金券明细

使用规则

1. 每位获奖同学发放1张对应额度的代金券；
2. 每个账户只能使用1张代金券；
3. 代金券不支持和其他优惠活动同时使用；
4. 代金券适用于阿里云移动研发平台（EMAS）全线产品，包括：EMAS套餐包、移动推送、HTTPDNS、移动测试、移动热修复、性能分析、远程日志、崩溃分析等；
5. 有效期，自活动颁奖后3个月，目前活动安排是10/20公布获奖结果；
   （代金券使用最终解释权在阿里云）

附录2：插件创意

官方期待大量云端一体插件，所谓云端一体，指前端和云端配套，完成了一段相对独立的业务。
比如uni-id就是典型的云端一体插件。
但事实上云端一体，大有可为，官方认为如下插件大有可为：

云端一体组件

• banner云端一体组件

  1. 云数据库中设计一个banner表，存放图片地址、点击链接
  2. 云函数处理逻辑
  3. 前端需要一个组件，基于swiper的封装
  4. pc端需要一个维护界面，可以上传图片、编辑地址

  当插件作者提供好这样的组件时，开发者可以极大的提升效率。传统开发中，上述开发需要前后端工程师和测试工程师协作，至少需要2人周才能完成。
  而有了banner云端一体组件，立即节省两人周。哪怕为此插件付费，也是值得的。
  注意admin版和业务版，需要按2个项目上传为两个插件，在readme里互相引用说明。

• 上传组件
  1. 前端可以上传多张照片、视频，以及在app端可以上传任意文件
  2. 调用压缩
  3. 客户端安全直传uniCloud CDN，避免服务器中转
  4. 云函数中记录数据库
• 评分rate组件
  前端组件点击五角星，该组件利用clientDB绑定云数据库字段，实现点击五角星后，出现waiting，并直接修改数据库
• switch异步组件
  前端点击switch，利用clientDB绑定云数据库字段，自动修改数据库里的bool值，中间联网时有个waiting圈转
• 投票组件
  1. 云数据库设计一个vote表
  2. 前端通过clientDB渲染投票表单界面
  3. 点击投票按钮后利用clientDB提交数据库
  4. 管理端页面提供一个生成投票、统计投票的界面
• 企业通信录选择
  1. 云数据设计企业通信录
  2. 前端出一个多级选择界面
• 省市地址选择
  搭配着云数据库的多列picker
• 机场列表选择
  类似于一般app的机场选择界面，包含前端页面、搜索、indexList、云数据库

其实云端一体新世界，会迸发出非常多创意，不止上述这些。有了这些云端一体插件，开发者的开发效率又将大幅的提升。

云端一体模板

除了云端一体组件，还有云端一体的项目模板。
目前插件市场已经有云端一体的电商、外卖等模板，重点还期待如下项目模块：

• 电子书模板阅读一定章节后，需观看激励视频
• 将激励视频用于拉新、获客、留存、分享裂变，甚至与区块链相结合的项目模板
• 完善的新闻、博客、社区、在线教育、线下连锁商户、OA、CRM、进销存等项目模板

我们认为，这些插件都是需求广泛的插件，不但对开发者的效率提升有重大帮助，也能让插件作者收获躺赚的感觉，利用插件市场的流量、计费和版权保护，让插件作者和开发者共赢。

云端一体是一个新世界，拥有太多新机会。

不管是解决什么问题的插件，早做，就容易树立自己的品牌，在这个新风口占据一个躺赚的位置。

祝大家，成功获奖、成功躺赚！

友情提示 - 发布插件建议提供成品示例：

• 发布H5版本到uniCloud的静态托管，让使用者可以直接体验；
• 发布apk版本到uniCloud的静态托管，让使用者可以直接安装到手机上体验；

看到新版本支持编译后的包可以通过file方式打开，所以打包完成后提示的这句是不是可以去掉了。

相关问题描述可查看此链接
http://blog.gcrong.com/#/aDetail/56