微信小程序与web的区别
小程序必须用Https请求后端服务器
不支持cookie
使用微信内部的用户管理系统
http://www.jianshu.com/p/c1c5b1f641b1
https://segmentfault.com/a/1190000007605475
http://www.php.cn/xiaochengxu-359941.html
http://blog.csdn.net/mad_geek/article/details/53148267
http://www.bubuko.com/infodetail-384792.html
7.28 解决掉微信小程post问题
炎炎盛夏，突然变得凉爽宜人，明天是周末，去做些什么呢？小雪是离不开人的，不能远走，带着她。不想这些了，微信小程序的post到django让我很是困惑不过终于解决掉了。几天在外面跑来跑去，有些心野了，收心。
post的要点
1.header:{
“Content-Type”: “application/x-www-form-urlencoded;charset=UTF-8”
}
2.data:Util.json2form(e.detail.value)
json2form:
function json2form(jsonobj){
var str=[];
for(var p in jsonobj){
str.push(encodeURIComponent(p)+”=”+ encodeURIComponent(jsonobj[p]));
}
return str.join(“&”);
}
module.exports = {
formatTime: formatTime,
imageUtil: imageUtil,
json2form:json2form
}
var Util = require(‘../../utils/util.js’);
django的setting中要注释掉 django.middleware.csrf.CsrfViewMiddleware
然后一切都变得正常了。下一个任务微信小程序的用户识别。
https://github.com/gusibi/python-weixin
用户识别
formSubmit: function (e) {
console.log('form发生了submit事件，携带数据为：', e.detail.value);
console.log(app.globalData.userInfo);
wx.getSetting({
success:re=>{
if (re.authSetting["scope.userInfo"]){
wx.login({
success: function (res) {
console.log("mm");
console.log(res.code);
Util.addprj(e.detail.value, res.code);
}
})
}else{
console.log("fail");
wx.openSetting({
success: m => {
console.log(m.authSetting);
if(m.authSetting["scope.userInfo"]){
wx.login({
success: function (res) {
console.log("mm");
console.log(res.code);
Util.addprj(e.detail.value, res.code);
}
})
}
}
})
}
}
})
}function json2form(jsonobj){
var str=[];
for(var p in jsonobj){
str.push(encodeURIComponent(p)+"="+ encodeURIComponent(jsonobj[p]));
}
return str.join("&");
}
function addprj(jsonobj,code){
var formjson=jsonobj;
wx.getUserInfo({
withCredentials:true,
success: function (res) {
console.log(res.userInfo);
console.log(res.iv);
jsonobj["encryptedData"] = res.encryptedData;
jsonobj["iv"] =res.iv;
jsonobj["code"] = code;
console.log(jsonobj);
wx.request({
url: 'https://test.com/proj/onAppLogin/',
method: 'POST',
data: json2form(jsonobj),
header: { "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8" },
success: function (re) {
console.log(re);
console.log(re.data["openId"]);
re.data["prjname"]=formjson["prjname"];
re.data["prjaddr"]=formjson["prjaddr"];
re.data["regtime"]=new Date().getTime();
wx.request({
url: 'https://test.com/proj/addprj/', //仅为示例，并非真实的接口地址
//method:'GET',
method: 'POST',
data: json2form(re.data),
header: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
},
success: function (res) {
var data = res.data;
}
})
}
})
}
})
}def onAppLogin(request):
if request.method=="POST":
code=request.POST.get("code")
encrypted_data=request.POST.get("encryptedData")
iv=request.POST.get("iv")
api = WXAPPAPI(appid=WEIXIN_APPID,
app_secret=WEIXIN_APPSECRET)
session_info = api.exchange_code_for_session_key(code=code)
# 获取session_info 后
session_key = session_info.get('session_key')
crypt = WXBizDataCrypt(WEIXIN_APPID, session_key)
# encrypted_data 包括敏感数据在内的完整用户信息的加密数据
# iv 加密算法的初始向量
# 这两个参数需要js获取
user_info = crypt.decrypt(encrypted_data, iv)
json_string = json.dumps(user_info)
return HttpResponse(json_string)
#return HttpResponse(json_string)def onAppLogin(request):
if request.method=="POST":
code=request.POST.get("code")
encrypted_data=request.POST.get("encryptedData")
iv=request.POST.get("iv")
api = WXAPPAPI(appid=WEIXIN_APPID,
app_secret=WEIXIN_APPSECRET)
session_info = api.exchange_code_for_session_key(code=code)
# 获取session_info 后
session_key = session_info.get('session_key')
crypt = WXBizDataCrypt(WEIXIN_APPID, session_key)
# encrypted_data 包括敏感数据在内的完整用户信息的加密数据
# iv 加密算法的初始向量
# 这两个参数需要js获取
user_info = crypt.decrypt(encrypted_data, iv)
json_string = json.dumps(user_info)
return HttpResponse(json_string)
#return HttpResponse(json_string)def addPrj(request):
userinfo={}
userinfo["nickname"]=request.POST.get("nickName")
userinfo["gender"]=request.POST.get("gender")
userinfo["city"]=request.POST.get("city")
userinfo["province"]=request.POST.get("province")
userinfo["openId"]=request.POST.get("openId")
#userinfo["regtime"]=request.POST.get("regtime")
userinfo["avatarUrl"]=request.POST.get("avatarUrl")
wxuser=WxUser.objects.filter(openId=userinfo["openId"])
if(not wxuser.exists()):
wx=WxUser.objects.create(nickname=userinfo["nickname"],gender=int(userinfo["gender"]),city=userinfo["city"],province=userinfo["province"],openId=userinfo["openId"],avatarUrl=userinfo["avatarUrl"])
wx.save()
projaddr = request.POST.get("prjaddr")
projname = request.POST.get("prjname")
proj.objects.get_or_create(useropenid=userinfo["openId"],proj_name=projname, proj_addr=projaddr)
if (request.method == "POST"):
return HttpResponse("{'url':'" + projname + "'}")
else:
return HttpResponse("{'url':'nono'}")8月15日
下一步为微信样式：
微信样式如下：https://weui.io/
https://mp.weixin.qq.com/debug/wxadoc/design/index.html?t=2017621
http://www.phpstudy.net/css3/
https://www.w3cschool.cn/weixinapp/rmcw1q8t.html
微信小程序的样式：
container:quickstar时就会来的一个样式
button: type(default,warn,primary)自带背景色，可以像做网页那样设计自己的按钮，然后做为背景放入。
background-size:(cover和contain)
display:flex
flex-direction
基本与网页排版区别不大，比公众号的内网页开发要灵活很多，小程序还是很不错的，少了很多的往复认证过程。
<view class="container">
<view class="appTitle">
<view class="item1">HOCKEY</view>
<view class="item2">TRAIN & GAME</view>
</view>
<view class="userinfo">
<button class="bt1" wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" size="default">
<label>点击授权进入</label></button>
<block wx:else>
<button class="bt2" size="default" type="warn" bindtap="Scancode"><label>马上签到</label></button>
<button class="bt2" size="default" type="warn" ><label>训练安排</label></button>
<button class="bt2" size="default" type="warn" ><label>比赛信息</label></button>
<button class="bt2" size="default" type="warn"><label>积分查询</label></button>
<button class="bt2" size="default" type="warn" ><label>积分兑换</label></button>
</block>
</view>
page{
background-color: #000;
background:url('../../images/weixin/IMG5.jpg') no-repeat #000;
}
.appTitle
{
display:flex;
flex-direction: column;
align-items:center;
}
.item1{
color:#fff;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-weight: bolder;
font-size: 4em;
}
.item2{
color:crimson;
font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
font-weight: bolder;
font-size: 1.3em;
}
.bt1>label{
font-size:1em;color:yellow;padding-left:20px;margin-right:20px
}
.bt2>label{
font-size:1em;color:yellow;padding-left:20px;margin-right:20px
}
.bt1{
top:100px;
background:url('../../images/weixin/bt2.png');
background-size:cover;
border:none;
}
.bt2{
top:100px;
background:url('../../images/weixin/bt2.png');
background-size:cover;
border:none;
}
.userinfo {
width:100%;
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}8月16日：
满怀信心，觉得眼前是亮的，一切都不是问题了，微信小程序越来越显得灵动起来，就在想一鼓作气完成的时候发现又掉坑里了，这坑，没有准备，原本是想打通同一公众号下内网页与小程序之间的用户统一，UnionId~~~~没错就是这家伙，从一开始我就注意着他，想着一定要用上这个东西，小程序运转OK，公众号网页运转OK，那就再验证一下用户统一吧，怎以回事？为什么在小程序的用户信息中得不到unionId,说好的统一呢？又重新看了一下unionId的介绍，不带这样的，还要去开放平台下去认证，本人不怕认证就怕花钱，这前前后后的，左一个认右一个认的，同一公众号下的小程序用户统一也要再来一个认证才行，如果不花钱，这我可以接受，又要花钱，没必要嘛，小程序的开发原本也没有什么经济利益的，只是图个用得方便。做到此不得不放弃。
以下是从经济角度出发做的总结：
1.本着小程序开发的想法，原本应不必弄什么公众号，只需申请个小程序开发的帐号，但你会发现这个开发帐号也是要认证的，也是要交费的。如果你已有了微信公众号的认证交费，可以直接用微信公众号的认证也不必再交费。还是有一个公众号的好，毕竟您还得做公众号的内网页开发。
2.小程序的开发灵活，公众号网页开发受限制的地方太多。更爱小程序。
3.在统一移动应用，网页应用，公众内网页应用时，即便在同一主体公众号下的开发，也需要再申请一个开放开台帐号做平台绑定，这种绑定是要付费的。同样是300.
也就是如果您想做一个平台统一的开发没600的预算是不行的，这600中还不包括微信支付平台和微信网店的开通，如一并加上应是过千的。
以上只是暂时的心得，还需继续看一看是不是哪儿自己理解错了。
8.17日
研究小程序要告一段落，今天想完成摇一摇的在小程序中的实现。
参考资料如下：
http://blog.csdn.net/xiangzhihong8/article/details/53888087
http://www.jb51.net/article/102493.htm