uni-simple-router

插件地址：uni-simple-router
（uni-read-pages在uni-simple-router文档中有提及）

此次版本为uni-simple-router@1.5.5，2.0暂不支持这种写法

可拦截到所有uni-app支持的页面跳转

安装插件

npm install uni-read-pages

npm install uni-simple-router@1.5.5

1. 配置vue.config.js

在项目根目录下创建vue.config.js

const TransformPages = require('uni-read-pages')  

const tfPages = new TransformPages()  
module.exports = {  
    configureWebpack: {  
        plugins: [  
            new tfPages.webpack.DefinePlugin({  
                ROUTES: JSON.stringify(tfPages.routes)  
            })  
        ]  
    }  
}

2. 新建router.js

在common目录下新建router.js

import Vue from 'vue'  
import Router from '@/components/uni-simple-router'  

Vue.use(Router)  
//初始化  
const router = new Router({  
    APP: {  
        animation: {  
            animationType: 'pop-in',  
            animationDuration: 300  
        }  
    },  
    encodeURI: false,  
    routes: ROUTES //路由表  
});  

//全局路由前置守卫  
router.beforeEach((to, from, next) => {next();})  
// 全局路由后置守卫  
router.afterEach((to, from) => {})  
export default router;

3. 在 main.js 引入 router.js

import router from '@/common/router'  
import {  
    RouterMount  
} from '@/components/uni-simple-router'  

//放在最后  
//v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式  
// #ifdef H5  
RouterMount(app, '#app');  
// #endif  
// #ifndef H5  
app.$mount(); //为了兼容小程序及app端必须这样写才有效果  
// #endif

this.$api.json('APPURL')
例如：
,onShow(){
this.loadData();
},
methods: {
async getAddress(){
this.tmp_cache=await this.$api.json('APPURL');
改进成
App.vue
里面
<script>
/**

• vuex管理登陆状态，具体可以参考官方登陆模板示例
  */
  import {
  mapMutations
  } from 'vuex';
  export default {
  //参考了https://ask.dcloud.net.cn/article/35021
  //this.$api.json('APPURL') 特别慢将近2秒
  globalData: {
  text: 'text',
  APPURL:'https://api.h**.com'

瞬间快了

图片问题的处理

···<image :src="$util.img(items)" mode="aspectFill"></image>···

必须添加 mode=“aspectFill”属性，不然图片显示 不正常

实力团队App代上架，App代上架合作，有需求请Q：1481983952

安卓各大应用市场、谷歌市场，iOS App Store，都可以做，实力团队App代上架

App代上架，有需要请联系Q：1481983952

ios 企业签名 ，TF上架，价格优惠哦，走一波老铁们 qq 445849201

注意事项：
uni.share分享到微信可以使用网络图片，但是分享到QQ时需要用uni.downloadFile下载后使用

if (provider == "qq") {  
    uni.downloadFile({  
        url: imgUrl, // 要分享的网络图片链接  
        success: (res) => {  
            if (res.statusCode == 200) {  
                uni.share({  
                    provider: 'qq',  
                    type: 2,  
                    imageUrl: res.tempFilePath,  
                    href: '', // 分享图片到qq时必填但可置空  
                    success: function(res) {  
                        console.log(res);  
                    },  
                    fail: function(err) {  
                        console.log(err);  
                    }  
                });  
            }  
        }  
    })  
}

=====2021-04-03更新=====
**share:fail [ShareQQ:5]未知错误

{  
    "errMsg": "share:fail [ShareQQ:5]未知错误,https://ask.dcloud.net.cn/article/287",  
    "errCode": -100,  
    "code": -100  
}

检查分享的url中是否包含中文，使用encodeURIComponent(JSON.stringify(‘中文部分’))将中文进行转码**

/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))

==> 示例出处

最近一直在调研unicloud云函数开发，所以一直想给js加入类型推导，这篇文章就记录一下我是如何开发TS版本的云函数的吧。

1. 确定使用TS还是Flow.js

Flow.js在基本语法上和TS很相像，我认为它是一个针对老项目的类型推导方案，因为只需要安装简单的包和给文件加入Flow的标识就可以给对应的文件提供类型推导的功能，所以针对目前我所做的这个业务来讲，不存在老项目，所以既然是新项目就不如直接上TS。

在云函数开发过程中，我们在插件市场选择了一款非常简洁已拓展的explain框架，这个框架目前已经支持单路由和restfulAPI还有基本的过滤拦截器，那么目前这个框架没有做TS的解决方案，我就斗胆替作者大大想一个曲线救国的方案，而且这个方案有以下特点：

1. TS的编译速度比官方提供的TSC编译要快几十倍到上百倍
2. 支持重新加载打包
3. 云函数项目0依赖就可以玩转这套方案

uni官方的云函数大小限制是10M，所以我们不能把依赖都安装在项目中，需要我们全局安装：

npm i -g typescript esbuild-node-tsc nodemon

1. esbuild-node-tsc是基于esbuild的ts编译器，大名鼎鼎的esbuild由于其出色的编译特性，能够让我们在大型项目中编译ts速度更快。
2. nodemon帮助我们在文件变更时重新编译ts

2个插件的玩法很多，尤其是nodemon，在我们这个解决方案中我们只需要简单的配置几个文件就可以把我们的项目跑起来了。

我们的云函数目录是这样的，这是搭配了前面提到的explain.js，在etsc.config.js中我们可以配置一下，输出的js版本规范以及目录和是否进行压缩：

module.exports = {  
  outDir: "./dist",  
  esbuild: {  
    minify: true,  
    target: "es2015",  
  },  
  assets: {  
    baseDir: "services",  
    filePatterns: ["**/*.json"],  
  },  
};

在services目录中编写完ts文件之后，esbuild-node-tsc会把js文件放到dist目录之下，我们现在只需要更改explain.js默认配置：

config.init({  
  baseDir: __dirname,  
  serviceDir: "/dist/"  
});

这样explain会从dist下找文件而不是从services文件下找

我们在这个根目录下运行编译命令即可

etsc

这个时候我们运行这个函数就会发现，它已经达到了我们的目标了：

1. 开发使用了ts
2. 可以正常的跑通和上传云函数

但是我们需要services下的文件一变更就编译放到dist下，我们就需要nodemon帮助我们做这个事情（nodemon.json）：

{  
    "watch": ["services"],  
    "ext": "ts,js,json",  
    "exec": "etsc",  
    "legacyWatch": true  
  }

监听services目录，包括文件名为ts,js,json，执行命令etsc

然后我们再把这个运行nodemon的命令放到package.json中：

"scripts": {  
    "dev": "nodemon"  
  },

这样我们就可以启动nodemon这个监听服务，可以很爽的使用ts来开发云函数啦~~

欢迎关注我的博客和公众号
因卓诶-unicloud云函数TS开发最优解决方案
公众号: 微信搜索【因卓诶】

问题：h5路由配置不生效
详情：由HBuildX编辑器新建个uni-app空项目。按文档正确添加路由后，不生效。浏览器直接输入地址，使用 navigator 标签，还是使用 uni.redirectTo 都没反应。没有任何提示，在官方文档中也没有提示。
原因：h5的路由模式，默认是 hash 模式，会自动加上 #。这时要生效的路径应该是：http://localhost:8080/#/pages/xxxxx，怪异的是 # 是添加在 pages 前面。
解决方案：修改 mainfest.json 文件，h5 -> router -> mode 修改为 history
希望文档里在 pages.json 里添加提示，或者直接默认 router 为 history，浪费了3个小时。

什么是push
一种服务端向在线或者离线的客户端， 实时通信的技术。

push现状
ios系统的苹果手机可以直接将push消息从开发者服务器发给苹果服务器，完美送达苹果手机。
而由于Google的Push服务FCM被墙，国内的应用不能通过FCM及时向用户发送营销消息。而第三方推送仅能在APP在线时完成推送，APP一旦被关闭（用户自己手动关闭，或手机的节电设置自动关闭了应用）就收不到消息了。
另一方面安卓手机的厂商多，国内就有5大手机厂商：华为、小米、vivo、oppo、魅族。这些厂家也推出了能在应用处于离线状态也能收到push消息的服务。而对应APP开发者来说每个手机厂家的服务都得集成开发一遍，这么多平台，工作量会非常巨大，管理维护也很麻烦。

什么是uni-push
3.1 技术上：DCloud再uni（统一）了一下，推出uni-push，开发者只需要开发一次。系统会自动在不同手机上选择最可靠的推送通道发送push消息，保障送达率。
3.2 价格上：uni-push的底层是“个推”（A股上市公司），个推的产品vip版是收费的；而个推是DCloud的股东，之间达成战略：将原本收费的个推vip版推送服务，完全免费地开放给DCloud旗下产品开发者使用。
这比市面上同类产品有了根本上绝对的优势，也成为了开发者们选择uni-app的一个理由。

push消息类型
首先消息分在线和离线。在线分透传和非透传，离线只能接收非透传消息。
前者好理解，什么是透传呢？以微信聊天为例，当你打开微信聊天界面时，你收到了好友给你发送消息。而在你的手机消息通知栏没有通知。这就是一种透传的表现。当你把应用切到后台（无论这个时候APP进程是否被杀死）如果你收到push消息，你的手机系统消息通知栏就会出现一条消息通知。你点击它一般就会唤醒app，或打开每个网页。这就是非透传消息通知。
那么透传消息能否也手机消息中心创建通知呢？答案是肯定的，你可以在收到透传消息的时候根据自己的业务设计选择创建。

如何在uni-app下合理地使用push
如图：

unicloud版uni-push插件
支持：unicloud或传统（PHP、java、python、c等）语言开发为后台的APP。
插件包含前后端代码，前后端用都是js写法的一个APP PUSH消息中心管理系统。
如果你的系统之前非unicloud写的可以将本插件url化为api进行调用访问，转url教程：https://uniapp.dcloud.io/uniCloud/http
如果您使用unicloud为后台，只需要改个config配置就能直接使用了。
链接：https://ext.dcloud.net.cn/plugin?id=1680

人人商城V3版本没有app，不过可以使用hbuilderX的wap2app技术进行打包，实测打包出来效果不错，app运行后几乎没有卡顿现象，支付，分享都可以正常使用，而且进一步根据wap2app的教程进行优化，比如加入nview模板等方法，流畅的很。

在打包成app之前首先需要对人人商城进行改造，其实改造的地方主要是：网站根目录/addons/ewei_shopv2/static/js/app/biz/下的有个h5app.js文件，这个文件里涉及了支付，微信登陆，分享等等方法，人人提供的js方法是基于YDB的，我们只需要改造一下，把支付方法改成html5+的，就可以完美实现微信登录，分享，原生微信支付宝支付了。
如果不会写代码推荐去git下载，附带一个地址，这是一个网友写的，已经改造好了h5app.js。还有后端的一些php代码也写好了，可以去下载，直接按照他的教程，覆盖文件，就可以使用hbuilderX打包了。
https://gitee.com/lionjoy/renrenapppay

你们应该学学apicloud，做个AppLoader，能降低开发门槛，你们宣传说uniapp无所不能，最后环境都弄不来，还指望用uniapp开发东西吗，一个调试都做不完善咋个开发，这个应该思考一下

<template>
<view class="service">
<view class="content" @click="uploadImg">
<image v-for="(item,index) in imgArr" :src="item" mode="widthFix"></image>
<image src="../../static/img/10.jpg" mode="widthFix" v-show="shows"></image>
</view>
</view>
</template>

<script>
export default {
data() {
return {
imgArr:[],
shows:true
}
},
onLoad() {

        },  
        methods: {  
            uploadImg(){  
                if(this.shows){  
                    this.shows=false  
                }  
                let that = this  
                uni.chooseImage({  
                    success(res) {  
                        console.log(res.tempFilePaths)  
                        that.imgArr = res.tempFilePaths;  
                        console.log(that.imgArr)  
                        }  
                })  
            }  
        }  
    }  

</script>
<style>
.content{width: 100%;text-align: center;}
.content image{width:80px;border-radius: 50%;}
</style>