微信公众号、微信小程序的同时开发

1、选用的编辑器HubderX和微信开发者工具(查看效果)
2、uniApp

3、请求方法uni.request()统一封装,请求拦截,响应拦截、配置h5代理

3、多写一个3:
//#ifdef H5 // #endif//#ifdef MP-WEIXIN // #endif包裹起来,前面是h5的处理逻辑,后面是微信小程序

4、路由守卫的问题(检测问题)目前是一个页面,所以(在onShow里面,uni.getStorage,然后在按钮上)

	<navigator :url="status? '/pages/authentication/authentication' : '/pages/user/user'" hover-class="navigator-hover" >

检测是否跳转,后来找了一个插件:
uni-simple-router,存在两个问题:1、tabbar跳转拦截不了(解决:1、你可以每个页面写onshow,2、自定义tabar(小程序自带的Tabbar组件,是小程序的,我还没有试))
5、注意的问题,小程序是通过wx.login({})获取code码和后端交互,公众号通过访问:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

appid都有,
微信公众号、微信小程序的同时开发_第1张图片
其他就是拼接问题:注意:
地址中不能出现空格或者转义字符等。其次在发起授权请求时,微信会对授权链接做正则强匹配校验,如果链接的参数顺序不对,授权页面将无法正常访问。
微信公众号、微信小程序的同时开发_第2张图片
使用开发者工具注意的几点:
1、manifest.json里面留有的是你appid,就是开发者的id,否则无法真机调试,和获取不到code
2、小程序获取订阅消息=》需要通过认证(普通就可以,也不需要钱),调用

wx.requestSubscribeMessage({
					tmplIds: ['eCcOekCdEfvAA55gZTT5Y4DUNasP5vf4YH9eUSC-jOI', 'ALTqMkc7yC8XsxA5T0U3ZAgHNrgTV_9N_j4zJsbsJEQ'],
					success(res) {
						console.log(res)
					},
					fail(err) {
						// console.log(err)
					}
				})

点击确定就可以,如果你点击不出来,那就是你的基础库有问题:基础库支持是在2.10之后好像:
点击右上角的 ‘》’然后点击详情,再然后本地设置
微信公众号、微信小程序的同时开发_第3张图片

配置代理:

manifest.json =》源码视图 =》 h5(代理是向自己服务器发请求,所以浏览器会显示loachost之类,然后通过这个代理去请求其他服务器:例如:http://localhost:3888/api/wechat/getUrl?appId=11111&url=333333)

"h5" : {
      
        "title" : "",
        "router" : {
            "base" : "/",
            "mode" : "history"
        },
        "devServer" : {
            "https" : false,
            "port" : 3888,
            // "disableHostCheck" : true,
            "proxy" : {
                "/api" : {
                    // "target" : "http://192.168.3.227:3999", //请求的目标域名
					"target" : "http://49603a77516e.ngrok.io", //请求的目标域名
                    "changeOrigin" : true, //是否跨域
                    "secure" : false, // 设置支持https协议的代理
                    "pathRewrite" : {
                        "^/api" : ""
                    }
                }
            }
        },
        "sdkConfigs" : {
            "maps" : {
                "qqmap" : {
                    "key" : ""
                }
            }
        }
    }

微信公众号授权流程:

ps:我使用的是微信测试号
1、首先,你可以先拥有一个配置代理,
2、前端= 》后端 (后端来和微信服务器交互) =》你=后端
3、首先appid的位置,应该最上面能看到,第二就是下面、好了你懂了吗,里面是可以填ip的,不光只有域名,接下来还有10003 域名不一致问题等你,骚年祝你幸福
微信公众号、微信小程序的同时开发_第4张图片

注意!你可以用ngrok来映射出去!!!!1,但是你配置的时候,千万千万别加 http://血的痛

你可能感兴趣的:(微信公众号,小程序)