2018-03-23 10:13:31 weixin_33766168 阅读数 65
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27856 人正在学习 去看看 秦子恒

需求

在微信网页开发中,点击返回按钮不刷新页面,进行页面切换,且实现'传值'功能.

问题由来

在做微信网页开发时,由于微信的左上角返回按钮会返回上一个页面并且刷新,无法做成打开页面选择内容后关闭当前页面,并且给前一个页面传值的功能.

实现方法

想实现此功能一开始想到的是不进行页面跳转了,把选择内容的页面也做在当前页面里,然后使用js来控制显隐.

登记页面

// 点击修改学校按钮
document.querySelector('.em-school-right').addEventListener('tap', function() {
    document.querySelector('.em-sign').classList.add('mui-hidden');
    document.querySelector('.em-address').classList.remove('mui-hidden');
})

选择页面

在微信实际页面中,由于整页显示,用户会点击到左上角返回按钮,会造成关闭页面.

需要对返回按钮进行一些操作来修改返回后的效果.

pushState

history提供了一个方法pushState,可以手动的添加页面进栈。

使用语法:

history.pushState(state, title, url);
state:Object,与要跳转到的URL对应的状态信息。
title:页面名字,方便调试。
url:要跳转到的URL地址,不能跨域,对于单页应用来说没用,传空即可。

修改点击事件

// 点击修改学校按钮
document.querySelector('.em-school-right').addEventListener('tap', function() {
    document.querySelector('.em-sign').classList.add('mui-hidden');
    document.querySelector('.em-address').classList.remove('mui-hidden');
    // 历史记录中插入一条记录,防止微信返回按钮会关闭页面
    var state = {
        title: "选择学校",
        url: "#school" // 这个url可以随便填,只是为了不让浏览器显示的url地址发生变化,对页面其实无影响
    };
    window.history.pushState(state, state.title, state.url);
})

onpopstate

history.go和history.back(包括用户按浏览器历史前进后退按钮)触发,并且页面无刷的时候(由于使用pushState修改了history)会触发popstate事件,事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state

对返回按钮添加监听

// 添加微信返回\前进事件监听
window.addEventListener("popstate", function(e) {
    // 选择地址页面隐藏
    document.querySelector('.em-address').classList.add('mui-hidden');
    // 签到页面显示
    document.querySelector('.em-sign').classList.remove('mui-hidden');
}, false);

此时进入选择地址页面后,点击返回按钮,能实现页面切换
页面切换

选择学校后也要实现该操作,用 history.go(-1);实现手动去除历史记录中添加的记录

// 选择学校
mui('#choose-school').on('tap', 'li', function() {
    var schoolName = this.querySelector('.em-left-name').innerText;
    var schoolAddress = this.querySelector('.em-left-address').innerText;
    document.querySelector('.em-left-name').innerText = schoolName;
    document.querySelector('.em-left-address').innerText = schoolAddress;

    // 手动去除历史记录中插入的记录
    history.go(-1);
    // 选择地址页面隐藏
    document.querySelector('.em-address').classList.add('mui-hidden');
    // 签到页面显示
    document.querySelector('.em-sign').classList.remove('mui-hidden');
})

选择学校

修改完善代码,实现后退,前进功能

/**
 * @description 初始化监听
 */
initListeners: function() {
    var self = this;

    // 添加微信返回\前进事件监听
    window.addEventListener("popstate", function(e) {
    //处于选择学校页面
    if(self.chooseSchool) {
        // 选择地址页面隐藏
        document.querySelector('.em-address').classList.add('mui-hidden');
        // 签到页面显示
        document.querySelector('.em-sign').classList.remove('mui-hidden');
    }
    
    // 页面前进后如果为选择学校页面
    if(/#school/.test(window.location.href)){
        self.chooseSchool = true;
        document.querySelector('.em-sign').classList.add('mui-hidden');
        document.querySelector('.em-address').classList.remove('mui-hidden');
    }

}, false);


// 点击修改学校按钮
document.querySelector('.em-school-right').addEventListener('tap', function() {
    self.chooseSchool = true;
    document.querySelector('.em-sign').classList.add('mui-hidden');
    document.querySelector('.em-address').classList.remove('mui-hidden');

    // 历史记录中插入一条记录,防止微信返回按钮会关闭页面
    var state = {
        title: "选择学校",
        url: "#school" // 这个url可以随便填,只是为了不让浏览器显示的url地址发生变化,对页面其实无影响
    };
    window.history.pushState(state, state.title, state.url);
})

// 选择学校
mui('#choose-school').on('tap', 'li', function() {
    self.chooseSchool = false;
    var schoolName = this.querySelector('.em-left-name').innerText;
    var schoolAddress = this.querySelector('.em-left-address').innerText;
    document.querySelector('.em-left-name').innerText = schoolName;
    document.querySelector('.em-left-address').innerText = schoolAddress;

    // 手动去除历史记录中插入的记录
    history.go(-1);
    // 选择地址页面隐藏
    document.querySelector('.em-address').classList.add('mui-hidden');
    // 签到页面显示
    document.querySelector('.em-sign').classList.remove('mui-hidden');
})
}

实现效果

e5dcca61d7_clip.gif

感觉通过这些操作实现了简单的页面路由的功能,适用于不是特别复杂的页面切换选择

2017-03-06 11:27:24 zhuming3834 阅读数 4552
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27856 人正在学习 去看看 秦子恒

流程

  1. 用户扫码或者直接点击链接进入我们的入口页面;
  2. 进入授权登录页面,用户点击授权登录按钮;
  3. 微信会自动将我么的网页授权域名后增加参数;
  4. 根据微信给的code去获取当前登录的微信用户的用户信息。

流程图

具体操作过程

1.配置网页授权域名
图1
图2
这里的域名设置只能设置一个,要求就按照微信的操作就可以。由于这个域名还是公司的,所以这里都马赛克处理了。
我们需要确保我们获取了权限
开发–>权限接口–>网页服务–>网页授权
图
2.配置txt路径可以访问
我的项目目录:
图3
微信的要求:wx.qq.com/mp/MP_verify_2poeJ5jQBozaGbNV.txt
我使用的Node.js+Express的框架,可以看这里之前的一些文章Node.js这里有Express的安转和新建项目、路由等。

router.all('/mp/MP_verify_xxxxx.txt', function(req, res, next) {
    res.sendfile("./wx/MP_verify_xxxxx.txt");
});

当我们在浏览器输入:xxx.cn/mp/MP_verify_xxxxx.txt的时候可以看见里面的信息。这个感觉是微信那边需要验证我们的网页授权域名是否设置正确。
这一步
3.阅读网页网页授权流程
微信网页授权文档大家先仔细看看文档。
- 用户同意获取code
这里我们需要严格的按照微信的要求谁知url路径:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
尤其注意:由于授权操作安全等级较高,所以在发起授权请求时,微信会对授权链接做正则强匹配校验,如果链接的参数顺序不对,授权页面将无法正常访问。这里也就是我在流程介绍里面的第一点介绍的入口页面。
之后会跳转到微信授权登录的页面
图3
点击授权登录按钮之后就会跳转到xx.cn/mp的页面这里我们就可获取到code了。
- 获取用户信息
获取用户信息其实基本都是后台做的事,因为微信不允许我们子啊前台调用微信的接口,不管怎么搞都是跨域,而且微信也说了这个需要在后台操作。
剩下的步骤看文档就很明确了。我的后台代码。

/*
 * 根据code获取微信用户的用户信息
 */
router.get('/mp/getUserInfo', function(req, res, next) {
    var param = req.query || req.params; 
    var code = param.code;
    var url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + wxConfig.AppID + '&secret=' + wxConfig.Secret + '&code=' + code + '&grant_type=authorization_code';
    request(url, function (error, response, access_token_body) {
        if (!error && response.statusCode == 200) {
            var access_token_data = JSON.parse(access_token_body); 
            // 获取access_token后 就做缓存
            // access_token 有效期是7200s
            var userinfoUrl = 'https://api.weixin.qq.com/sns/userinfo?access_token=' + access_token_data.access_token + '&openid=' + access_token_data.openid + '&lang=zh_CN ';
            request(userinfoUrl, function (error, response, userinfo_body) {
                if (!error && response.statusCode == 200) {
                    var userinfo_data = JSON.parse(userinfo_body); 
                    res.end(JSON.stringify(userinfo_data));
                }
            })
        }
    })
});
前台只需要调用getUserInfo这个接口,传入code就可以获取到了。这里关于access_token的时效性还没处理。 这里我是直接把微信返回的数据给了前台处理。

最后

至此,微信网页开发–获取微信用户信息就介绍完了。
由于是第一次做微信网页开发,中间遇见过跨域的问题(上面有说为什么跨域),也不知道具体流程是怎样的,基本就是一边踩坑一边总结出来的流程。

2018-12-24 13:06:43 daxianghaoshuai 阅读数 680
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27856 人正在学习 去看看 秦子恒

今天在学习使用uniapp,开发微信小程序时第三方登录时,HBuild编辑器报了一个错误,经过定位分析,确定代码是没有问题的,报错如下
如若已在管理后台更新域名配置,请刷新项目配置后重新编译项目
在这里插入图片描述
经过在网上查询资料,得到解决方法,只需修改HBuild配置即可
找到模拟器右上角的详情按钮,点击,弹出配置信息,把最下面的2勾选框选上,再次编译下项目,即可。
在这里插入图片描述

2018-05-03 21:34:39 sunshine_csj 阅读数 1326
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27856 人正在学习 去看看 秦子恒

开发微信小程序,需要在微信公众平台中注册小程序,并下载微信开发者工具,根据平台提供的文档进行开发。

首先搭建了学生登录页面,并通过学号和密码返回数据。小程序开发的标签与h5不尽相同,需根据文档进行编写。

下面是我写的js代码。为提交按钮添加一个事件,访问接口,获取该学生的授课老师的信息,并将数据同步缓存到本地,方便下个页面直接使用,然后跳转到下个页面。

formSubmit: function (e) {
    // console.log(e.detail.value);
    wx.request({
      url: '', //仅为示例,并非真实的接口地址
      data: {
        username: e.detail.value.no,
        password: e.detail.value.pwd
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        // console.log(res.data);
        wx.setStorageSync('student', res.data);
        wx.redirectTo({
          url: '../teachers/teachers'
        })
      }
    })
  },

下面是我写的显示教师信息的代码。访问API接口,并传递参数,参数classid是上一步的student数据里的,所以需要从本地缓存中获取,成功返回教师信息。需要注意的是,因为下面的代码是函数里套着函数,所以需要用js的箭头函数来获取需要的数据。

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var url = "";
    var student = wx.getStorageSync('student');
    // console.log(student);
    var classid = student.classid;
    // console.log(classid);
    wx.request({
      url: url,
      data:{
        classid:classid
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: (res)=> {
        // console.log(res.data);
        this.setData({teachers:res.data});
      }
    })
  },

下面是我写的显示评教信息的代码。步骤同上。

onLoad: function (options) {
    var teacherid = options.teacherid;
    console.log(teacherid);
    var url= '';
    wx.request({
      url: url,
      data: {
        teacherid: teacherid
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: (res) => {
        console.log(res.data);
        this.setData({ testpaper: res.data.testpaper });
        this.setData({teacher:res.data.teacher});
      }
    })
  },

2018-04-09 19:34:35 GrahamACER 阅读数 3269
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27856 人正在学习 去看看 秦子恒

坑1,首先是一定要用微信开发者工具调试你的页面,虽然它就是一个Chrome内核包裹的玩意,但如果不用它的工具直接用Chrome你是收不到任何API返回的提示的

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

坑2,使用we.addCard一定要放在wx.ready里面,同时所有你使用的方法(例如wx.addCard)一定要放在wx.config的jsApiList里

坑3,jsapi签名拿回的sign,一定要是你当前访问程序的URL计算出来的api,不然会判断违法。也就是说出于安全考虑,开发者一定要在服务器端完成签名逻辑,并且建议使用者也在线上环境拿到signature

坑4,之前遇到一个问题,现象大概是:打开config中的debug:true是可以调用的,console返回的信息也是正确。但是一单关闭debug,addCard又不能用了,实在令人头大

最后尝试了下,一旦加入alert事件让页面暂停,就能顺利运行。所以认为这是config请求和addCard的同步问题

官网API解释过congfig可以放在MVVM框架中的mounted中执行,这样再调用addCard是不需要再次带上config的,问题得到解决

小程序总结

阅读数 385

没有更多推荐了,返回首页