联系QQ290557209

前端：html5+js
服务端:asp+js+mdb

【小白，勿喷】第一次尝试，花了差不多一天的时间，仅仅是Demo
【需求说明】将自己的H5 vlog 分享给微信好友或是微信朋友圈时 带图文，总之好看即可，不是单纯的链接就行
以下会分以下处理：

我在DCLOUD社区里面找了好久，也没有找到完整的教程，索性，自己去摸索！

1.注册一个 微信 公众号测试号 https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo

参数配置：且看下图：

一一讲解：
url: ：

• 这里需要创建一个云函数 getWXToken 这个是云函数的名称（h5绑定云函数不细讲）
• 云函数url 化 进入云函数列表 官方文档
• 云函数里面我仅用于测试，没有做验证；如果没有配置好云函数，填写链接和token完，会提示配置失败，所以先配置好，再点击配置即可
  代码如下：

  'use strict';  
  exports.main = async (event, context) => {  
  //event为客户端上传的参数  
  console.log('event : ', event)  
  let WECHAT_TOKEN = "这里是在测试公众号填写的token";  
  let params = event.queryStringParameters  
  if(params){  
      let signature = params.signature  
      let nonce = params.nonce  
      let echostr = params.echostr  
      let timestamp = params.timestamp  
      return echostr //返回随机字符串即可  
  }  
  return event  
  };

  接下来是：JS接口安全域名
  这里我用的是本地测试，所以就将项目运行，然后获取 即可。h5使用的是hash模式 具体配置参考 H5去除# https://blog.csdn.net/impossible1994727/article/details/111183533

配置公众号和H5项目，接下里开始准备编写云函数：

获取签名：

获取签名，这里有用到官方提供的Demo里面的node的代码 下载链接
http://caibaojian.com/wxwiki/2c93473a5a98ae637b8af251cae883ffed11cf5e.zip

云函数名称 wxAction

引入微信jssdk 文章参考

https://ask.dcloud.net.cn/article/36813

jwx.js 我这边稍作修改

在页面中调用：这里看个人如何处理分享逻辑，怎么喜欢怎么来

initShare(){  
    if (this.$jwx && this.$jwx.isWechat()) {  
                    uni.showToast({  
                        title:'微信环境'  
                    })  
                    this.$jwx.initJssdk({shareTitle:'微信分享测试',shareDesc:'我是分享的描述'})  
                }  
    },  

做完以上 的步骤之后，就开始来测试吧。使用微信开发者工具进行测试

当出现以上的界面是，说明测试成功了

感谢以上的大神的文章参考
完整内容请看 完整文章 https://blog.csdn.net/weixin_41104307/article/details/111296303

吐槽一下，由于内容比较多，写完之后，居然发不出，提示FEIFA。我也醉了。

// home.vue  调用弹窗  
const noticePopup = uni.getSubNVueById('notice'); //获取  
noticePopup.show("fade-in", 300) // 显示   

// notice.nvue  弹窗页面  
uni.getCurrentSubNVue().hide('fade-out')//隐藏  

相关文档：https://uniapp.dcloud.io/api/window/subNVues?id=app-getsubnvuebyid  

// pages.json 配置subVue页面  

        {  
            "path": "pages/home/home",  
            "style": {  
                "navigationBarTitleText": "首页",  
                "enablePullDownRefresh": true,  
                "onReachBottomDistance": 50,  
                "titleNView": false,  
                "app-plus": {  
                    "bounce": "none",  
                    "subNVues": [{  
                            "id": "popup",  
                            "path": "paltform/app-plus/subNVue/popup/popup",  
                            "type": "popup",  
                            "style": {  
                                "position": "absolute",  
                                "top": "0",  
                                "left": "0",  
                                "width": "100%",  
                                "height": "100%",  
                                "background": "transparent"  
                            }  
                        },  
                        {  
                            "id": "notice",  
                            "path": "paltform/app-plus/subNVue/popup/notice",  
                            "type": "popup",  
                            "style": {  
                                "position": "absolute",  
                                "top": "0",  
                                "left": "0",  
                                "width": "100%",  
                                "height": "100%",  
                                "background": "transparent"  
                            }  
                        }  
                    ]  
                }  
            }  
        },  

subVue配置：https://uniapp.dcloud.io/collocation/pages?id=app-subnvues  

如名，已步入中年，又逢失业。
今立贴，开启学习之路，望老伙伴、小伙伴提携。
2020-12-16

时间好快啊，入坑竟然快一个月了。学了点皮毛，准备开始找小应用下手实践
2021-01-14

年也过完了，已经入坑两个多月了，继续开始uni-app之路。已结合uniCloud重写了之前一个项目，已上架华为市场
2021-2-27

AR-RtcModule插件下载地址：https://ext.dcloud.net.cn/plugin?id=3661#detail

GitHub下载地址：https://github.com/anyRTC/uni-app-SDK

功能

可以创建房间，有主播端和游客端，可以多人视频通话，也可点对点通话。

当进入主播端的时候可以单人或多人视频通话，输入同一房间号即可。

如图所示

游客端只能浏览，不会显示在主屏幕上。

如图所示

应用场景

1、点对点通话
2、语音群聊
3、视频直播
4、视频连麦
5、对讲

更多关于音视频的资讯请关注anyRTC官网：https://www.anyrtc.io/

1、没有取消授权API
2、获取到的微信用户信息不是实时的
3、执行取消登录logout后可以直接执行login，或者先执行getUserInfo
3.1、logout---authorize----login，调起两次微信。
3.2、logout---getUserInfo--authorize----login，login成功
3.3、logout-------login，login成功

判断用户是否登录过：aweixin.getUserInfo
没有登录过执行授权：aweixin.authorize
成功后执行登录：aweixin.login
登录成功后判断是否返回用户信息：target.userInfo
没有用户信息获取用户信息：aweixin.getUserInfo

更新iOS后发现问题，检查了代码却发现没有任何变动
1、微信分享没有回调
2、无法调起小程序
========================
com.apple.developer.associated-domains没有配置好
在distribute新加capabilities
"capabilities" : {
"entitlements" : {
"com.apple.developer.associated-domains" : [ "applinks:自己的applinks" ]
}
}

最坑的一个点，配置之后还是无效，一开始以为方法错了，后面发现先调用一次微信支付就可以了。
至于如果不调用微信需要多久才成生效就不确定了

我要做的功能是在微信小程序上使用人脸识别接口然后获取人物的整个头部，这个时候用到了uni.canvasToTempFilePath。
直接上代码吧。

this.context.fillStyle = '#ffffff';  
this.context.fillRect(0, 0, image.width, image.height);  
this.context.draw(true,()=>{  
    this.context.drawImage(path, 0, 0, image.width, image.height)  
    this.context.draw(true,()=>{  
        uni.canvasToTempFilePath({  
            x: this.rect.x,  
            y: this.rect.y,  
            width: this.rect.width,  
            height: this.rect.height,  
            destWidth: this.rect.width,  
            destHeight: this.rect.height,  
            canvasId: 'myCanvas',  
            success: function(res) {  
                // 在H5平台下，tempFilePath 为 base64  
                console.log(res)  
                _this.url = res.tempFilePath;  
                }  
          })  
    })  
})

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