微信公众号订阅号开发项目小记

工作描述:微信公众号订阅号开发抽奖相关页面

软件环境:WebStrom ,微信开发者工具v0.7.0等开发工具

项目描述:订阅号添加抽奖页面

    1、用户每天三次机会进行抽奖,奖品概率数量可控,存取用获奖奖品,存取用户输入的用户地址方便发放奖品

    2、项目主要采取 jqWeUi ,rem,jquery.cookie.js等完成页面布局等操作;

项目中遇到问题及处理:

    1、用户管理-网页授权获取用户openid/用户基本信息问题

微信公众号订阅号开发项目小记_第1张图片

            由于订阅号没有从页面获取授权的,而抽奖中奖之后需要存储用户中奖信息及地址,方案有两个:(1)为微信号开发后台,跳转也抽奖页面地址时将用户openId拼接在后面。(2)用服务号鉴权跳转抽奖页面,鉴权成功后除非用户退出微信清空缓存,一般不需要再次鉴权,由于公司刚好有服务号最终选择的方式也是第二种。

2、微信号的开发设置

(1)登录微信公众(登录的是服务号),设置——公众号设置---选择功能设置,如图所示

分别更具要求设置JS接口安全域名和网页授权域名(网页授权域名只有服务号才有这个选项)

微信公众号订阅号开发项目小记_第2张图片

注意:网页授权的域名填写不带www ,而页面部署服务器,跳转的页面地址带www,在跳转地址的时候会报参数错误

(2)获取微信公众号密码

微信公众号订阅号开发项目小记_第3张图片

获取到密码就可以正式对接微信号了;

(3)对于微信的接口是无法通过ajax请求的,存在跨域问题,都要用后台请求,然后返回给前端;这里说请求的都是后台转过的地址

获取Access_token:有效时间7200秒 可被请求次数100000 

https请求方式: GET
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

推荐参考:http://www.jb51.net/article/111743.htm

(4)微信网页授权

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842


授权的页面再次访问都不会重复提交,为了方便测试,推荐使用官方的微信web开发工具(在使用微信开发工具前要先把自己变成这个公众号的开发者路径:开发--》开发者工具--》绑定开发者账号,输入自己微信号同意一下就可以了)




(5)JSSDK 使用

https://mp.weixin.qq.com/wiki?t=resource/


用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi;获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。

在这里进行签名算法,可以是获取到后js进行签名,也可以直接是后台签完,讲签名与接口参数一起返回(目前本项目是后台签名)

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

将参数传入后就可以直接调用 微信的js ;

具体使用可以参考demo:http://203.195.235.76/jssdk/

(6)

接下来就是页面的开发。。。。微信的页面开发就是普通的手机端开发,单位使用rem. 开始引入一段js,来为body的font-sizes设置字体大小;页面的宽度设置就是百分比,慢慢调整,加上一些jqweui插件,开发起来没有太大难度。

jqweui地址:http://jqweui.com/

注意:在gethub下载demo时

他的默认下载是master,而所有编译后的代码都在 dist 目录下,为了减少垃圾文件,master默认忽略了这个目录,你可以自行编译或者切换到 build

微信公众号订阅号开发项目小记_第4张图片

微信公众号订阅号开发项目小记_第5张图片


(7)在上传文件时出现了一个问题


ios系统触发click的点击事件,调用$("#upload").click(),方法无法开启input:file的本地文件选择,而安卓可以,,但当调用两遍方法就可以。。代码如下

 
  

微信公众号订阅号开发项目小记_第6张图片






    

你可能感兴趣的:(微信开发笔记)