2017-10-20 18:09:36 milijiangjun 阅读数 2109
  • 微信公众平台应用开发(开发模式)

    微信公众平台开发教程,该课程内容包括本地调试:业务逻辑测试、消息接收与响应、测试流程;符号表情,微信开发模式,消息加解密等。 讲师:刘运强,网名柳峰,计算机硕士研究生,畅销书《微信公众平台应用开发:方法、技巧与案例》作者。 本课程主要面向有一定Java基础、对微信公众平台开发感兴趣的人员,能够帮助他们入门微信公众平台开发,少走弯路。

    8595 人正在学习 去看看 CSDN讲师

关键字:微信公众平台 微信开放平台 微信登录 微信扫码登录 使用微信账号登录网站
作者:方倍工作室 
原文:http://www.cnblogs.com/txw1958/p/weixin-qrlogin.html  

 

在这篇微信公众平台开发教程中,我们将介绍如何使用微信开放平台接口实现微信扫码登录的功能。

 

准备工作

网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。

在进行微信OAuth2.在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程。

授权流程说明

微信OAuth2.0授权登录让微信用户使用微信身份安全登录第三方应用或网站,在微信用户授权登录已接入微信OAuth2.0的第三方应用后,第三方可以获取到用户的接口调用凭证(access_token),通过access_token可以进行微信开放平台授权关系接口调用,从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。

微信OAuth2.0授权登录目前支持authorization_code模式,适用于拥有server端的应用授权。该模式整体流程为:

  1. 1. 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据code参数;

  2. 2. 通过code参数加上AppID和AppSecret等,通过API换取access_token;

  3. 3. 通过access_token进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。

获取access_token时序图:

第一步:请求CODE

登录方倍工作室微信登录网站应用

http://weixin.fangbei.org/login.php

打开后,应用会生成state参数,跳转到以下链接:(登录前请注意已获取相应网页授权作用域(scope=snsapi_login))

https://open.weixin.qq.com/connect/qrconnect?appid=wxed782be999f86e0e&redirect_uri=http%3A%2F%2Fweixin.fangbei.org%2Flogin.php&response_type=code&scope=snsapi_login&state=123#wechat_redirect

若提示“该链接无法访问”,请检查参数是否填写错误,如redirect_uri的域名与审核时填写的授权域名不一致或scope不为snsapi_login。

参数说明
参数 是否必须 说明
appid 应用唯一标识
redirect_uri 重定向地址,需要进行UrlEncode
response_type 填code
scope 应用授权作用域,拥有多个作用域用逗号(,)分隔,网页应用目前仅填写snsapi_login即可
state 用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加session进行校验
返回说明

此时,PC网站上显示如下二维码

 

用户允许授权后,将会重定向到redirect_uri的网址上,并且带上code和state参数

http://weixin.fangbei.org/login.php?code=0317a2c31ccd5eadf1a7a8fffd4a7dbf&state=123

为了满足网站更定制化的需求,我们还提供了第二种获取code的方式,支持网站将微信登录二维码内嵌到自己页面中,用户使用微信扫码授权后通过JS将code返回给网站。

JS微信登录主要用途:网站希望用户在网站内就能完成登录,无需跳转到微信域下登录后再返回,提升微信登录的流畅性与成功率。 网站内嵌二维码微信登录JS实现办法:

步骤1:在页面中先引入如下JS文件(支持https):
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
步骤2:在需要使用微信登录的地方实例以下JS对象:
复制代码
        <script>
            var obj = new WxLogin({
              id: "login_container",
              appid: "wxed782be999f86e0e",
              scope: "snsapi_login",
              redirect_uri: encodeURIComponent("http://" + window.location.host + "/login.php"),
              state: Math.ceil(Math.random()*1000),
              style: "black",
              href: ""});
        </script>
复制代码

参数说明

参数 是否必须 说明
id 第三方页面显示二维码的容器id
appid 应用唯一标识,在微信开放平台提交应用审核通过后获得
scope 应用授权作用域,拥有多个作用域用逗号(,)分隔,网页应用目前仅填写snsapi_login即可
redirect_uri 重定向地址,需要进行UrlEncode
state 用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加session进行校验
style 提供"black"、"white"可选,默认为黑色文字描述。详见文档底部FAQ
href 自定义样式链接,第三方可根据实际需求覆盖默认样式。详见文档底部FAQ

完整代码如下

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
    <body>
        <span id="login_container"></span>
        <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
        <script>
            var obj = new WxLogin({
              id: "login_container",
              appid: "wxed782be999f86e0e",
              scope: "snsapi_login",
              redirect_uri: encodeURIComponent("http://" + window.location.host + "/login.php"),
              state: Math.ceil(Math.random()*1000),
              style: "black",
              href: ""});
        </script>
    </body>
</html>
复制代码

页面显示效果如下 

 

第二步:通过code获取access_token

通过code获取access_token

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

参数说明
参数 是否必须 说明
appid 应用唯一标识,在微信开放平台提交应用审核通过后获得
secret 应用密钥AppSecret,在微信开放平台提交应用审核通过后获得
code 填写第一步获取的code参数
grant_type 填authorization_code
返回说明

正确的返回:

复制代码
{
    "access_token": "OezXcEiiBSKSxW0eoylIeFy2HFC4Bxv9JvC0Sgj4Px4_8TX1ci3jF_QP_6sWjvx2rCAUjXEP1_9edZdJLf3MIwii2N8cnTooDfx7nYpFRmOSZyq4gb2FNdWJr__KUqPtcfVUvg6XBTucZZ4zH6v8VQ",
    "expires_in": 7200,
    "refresh_token": "OezXcEiiBSKSxW0eoylIeFy2HFC4Bxv9JvC0Sgj4Px4_8TX1ci3jF_QP_6sWjvx2lW60INlf6AK1q21rW7mJyc5yG3GZ9p1psANOKTi2EZUQXA6CnwSXxDQlJ3421tEOvCWIrJhkA8oTqjsLKYG-yg",
    "openid": "oJekJs2faTQ47FGjDOEIyOPMN97s",
    "scope": "snsapi_login",
    "unionid": "o4wcnw02YjFUYglZxV0LwcBkVF6Y"
}
复制代码

参数说明

参数 说明
access_token 接口调用凭证
expires_in access_token接口调用凭证超时时间,单位(秒)
refresh_token 用户刷新access_token
openid 授权用户唯一标识
scope 用户授权的作用域,使用逗号(,)分隔
 unionid 当且仅当该网站应用已获得该用户的userinfo授权时,才会出现该字段。

错误返回样例:

{"errcode":40029,"errmsg":"invalid code"}

刷新access_token有效期

access_token是调用授权关系接口的调用凭证,由于access_token有效期(目前为2个小时)较短,当access_token超时后,可以使用refresh_token进行刷新,access_token刷新结果有两种:

  1. 1. 若access_token已超时,那么进行refresh_token会获取一个新的access_token,新的超时时间;

  2. 2. 若access_token未超时,那么进行refresh_token不会改变access_token,但超时时间会刷新,相当于续期access_token。

refresh_token拥有较长的有效期(30天),当refresh_token失效的后,需要用户重新授权。

请求方法

获取第一步的code后,请求以下链接进行refresh_token:

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

参数说明
参数 是否必须 说明
appid 应用唯一标识
grant_type 填refresh_token
refresh_token 填写通过access_token获取到的refresh_token参数
返回说明

正确的返回:


"access_token":"ACCESS_TOKEN", 
"expires_in":7200, 
"refresh_token":"REFRESH_TOKEN", 
"openid":"OPENID", 
"scope":"SCOPE" 
}

参数 说明
access_token 接口调用凭证
expires_in access_token接口调用凭证超时时间,单位(秒)
refresh_token 用户刷新access_token
openid 授权用户唯一标识
scope 用户授权的作用域,使用逗号(,)分隔

错误返回样例:

{"errcode":40030,"errmsg":"invalid refresh_token"}

注意:

1、Appsecret 是应用接口使用密钥,泄漏后将可能导致应用数据泄漏、应用的用户数据泄漏等高风险后果;存储在客户端,极有可能被恶意窃取(如反编译获取Appsecret);

2、access_token 为用户授权第三方应用发起接口调用的凭证(相当于用户登录态),存储在客户端,可能出现恶意获取access_token 后导致的用户数据泄漏、用户微信相关接口功能被恶意发起等行为;

3、refresh_token 为用户授权第三方应用的长效凭证,仅用于刷新access_token,但泄漏后相当于access_token 泄漏,风险同上。

 

建议将secret、用户数据(如access_token)放在App云端服务器,由云端中转接口调用请求。

 
第三步:通过access_token调用接口

获取access_token后,进行接口调用,有以下前提:

  1. 1. access_token有效且未超时;

  2. 2. 微信用户已授权给第三方应用帐号相应接口作用域(scope)。

对于接口作用域(scope),能调用的接口有以下:

授权作用域(scope) 接口 接口说明
snsapi_base /sns/oauth2/access_token 通过code换取access_token、refresh_token和已授权scope
/sns/oauth2/refresh_token 刷新或续期access_token使用
/sns/auth 检查access_token有效性
snsapi_userinfo /sns/userinfo 获取用户个人信息

其中snsapi_base属于基础接口,若应用已拥有其它scope权限,则默认拥有snsapi_base的权限。使用snsapi_base可以让移动端网页授权绕过跳转授权登录页请求用户授权的动作,直接跳转第三方网页带上授权临时票据(code),但会使得用户已授权作用域(scope)仅为snsapi_base,从而导致无法获取到需要用户授权才允许获得的数据和基础功能。

接口调用方法可查阅《微信授权关系接口调用指南》

 

下面是获取用户个人信息,并dump出来

复制代码
array(10) {
  ["openid"]=>
  string(28) "oJekJs2faTQ47FGjDOEIyOPMN97s"
  ["nickname"]=>
  string(15) "方倍工作室"
  ["sex"]=>
  int(1)
  ["language"]=>
  string(5) "zh_CN"
  ["city"]=>
  string(6) "海淀"
  ["province"]=>
  string(6) "北京"
  ["country"]=>
  string(6) "中国"
  ["headimgurl"]=>
  string(139) "http://wx.qlogo.cn/mmopen/Q3auHgzwzM7zdkiaZFdM5qrwk1iaEESVjfhWVHNg22teOnfKSPpKDE0l2yfQm1hM9AeT8pO1BKElntEBZ7DxibzdteBp3H3yXESwPYUkhibNObs/0"
  ["privilege"]=>
  array(0) {
  }
  ["unionid"]=>
  string(28) "o4wcnw02YjFUYglZxV0LwcBkVF6Y"
}
复制代码

 

核心代码如下

 

F.A.Q
1. 什么是授权临时票据(code)?

答:第三方通过code进行获取access_token的时候需要用到,code的超时时间为10分钟,一个code只能成功换取一次access_token即失效。code的临时性和一次保障了微信授权登录的安全性。第三方可通过使用https和state参数,进一步加强自身授权登录的安全性。

2. 什么是授权作用域(scope)?

答:授权作用域(scope)代表用户授权给第三方的接口权限,第三方应用需要向微信开放平台申请使用相应scope的权限后,使用文档所述方式让用户进行授权,经过用户授权,获取到相应access_token后方可对接口进行调用。

3. 网站内嵌二维码微信登录JS代码中style字段作用?

答:第三方页面颜色风格可能为浅色调或者深色调,若第三方页面为浅色背景,style字段应提供"black"值(或者不提供,black为默认值),则对应的微信登录文字样式为黑色。相关效果如下:

 

若提供"white"值,则对应的文字描述将显示为白色,适合深色背景。相关效果如下:

 

4.网站内嵌二维码微信登录JS代码中href字段作用?

答:如果第三方觉得微信团队提供的默认样式与自己的页面样式不匹配,可以自己提供样式文件来覆盖默认样式。举个例子,如第三方觉得默认二维码过大,可以提供相关css样式文件,并把链接地址填入href字段

.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display:none}
.impowerBox .status {text-align: center;} 

相关效果如下:

 

 

 

服务项目 技术咨询 微信图书 微信视频 微信代码 定制开发 其他福利
服务入口 QQ群有问必答
查看详情
一本书解决90%问题
查看详情
微信开发视频
小程序开发视频
免费代码

QQ:1354386063
营销工具
京东优惠折扣精选
2016-10-21 11:39:09 Denghejing 阅读数 2294
  • 微信公众平台应用开发(开发模式)

    微信公众平台开发教程,该课程内容包括本地调试:业务逻辑测试、消息接收与响应、测试流程;符号表情,微信开发模式,消息加解密等。 讲师:刘运强,网名柳峰,计算机硕士研究生,畅销书《微信公众平台应用开发:方法、技巧与案例》作者。 本课程主要面向有一定Java基础、对微信公众平台开发感兴趣的人员,能够帮助他们入门微信公众平台开发,少走弯路。

    8595 人正在学习 去看看 CSDN讲师

微信小程序最近刷爆朋友圈和微博,一个星期了就没消停过。于是我也出来打个酱油,尝试做了个小demo。本文演示了如何快速的快速开发一个事件提醒的微信小应用。

功能需求

  • 首先先说说功能需求:
  • 用户输入事件标题和提醒时间后保存
  • 列出全部事件
  • 对一条事件进行修改或删除
  • 后端定时任务,到了时间指定的提醒时间后,发送短信给用户手机

创建应用号微信小应用

打开“微信web开发者工具”v0.9版本,添加项目,随便输入AppID,随便输入项目名称,选择一个本地项目目录。

选中“在当前目录中创建quick start项目”,可以生成一个快速启动的程序页面,便于修改。

001

点击“添加项目”按钮后,进入项目界面,可以看到初始的页面样子:
002

点击用户头像后,进入查看log的界面。我们先把标题改一下,点击“编辑”按钮,打开Pages-index-index.js文件。

003

motto: 'Hello World'改为我们的新标题。

  1. motto: '我的事件提醒工具'

把点击头像跳转的页面改为eventList

  1. bindViewTap: function()
  2. wx.navigateTo({
  3. url: '../logs/logs'
  4. })
  5. },

改为:

  1. bindViewTap: function()
  2. wx.navigateTo({
  3. url: '../eventList/eventList'
  4. })
  5. },

下面我们添加一个“eventList”事件列表的页面,在Pages下面添加目录和相关的js,json,wxml,wxss文件。

注意,首先要在app.json中添加新的页面设置才能访问新的页面:

  1. {
  2. "pages":[
  3. "pages/index/index",
  4. "pages/logs/logs",
  5. "pages/eventList/eventList"
  6. ],

设计一下事件列表的主界面eventList.wxml,用block循环显示事件列表:

  1. <!--eventList.wxml-->
  2. <view class="container">
  3. <block wx:for="{{events}}" wx:for-item="event">
  4. <view class="event">
  5. <text>{{event.time}} - {{event.name}}</text>
  6. </view>
  7. </block>
  8. </view>

编写eventList.js代码,访问后端mashupcloud的API返回事件列表。

首先用http://baidu.com来测试网络连接:

  1. //eventList.js
  2. var util = require('../../utils/util.js')
  3. Page({
  4. data: {
  5. },
  6. onLoad: function () {
  7. var that = this
  8. url = 'http://baidu.com/'
  9. wx.request({
  10. url: url,
  11. success: function(res) {
  12. console.log(res.data)
  13. },
  14. fail: function() {
  15. console.log('fail to request')
  16. },
  17. complete: function() {
  18. console.log('request complete url='+url)
  19. }
  20. })
  21. }
  22. })

点击“重启”按钮后点击“调试”按钮,运行小程序,然后点击用户头像,进入事件列表页,此时控制台console中会显示用wx.request抓取到的网页的内容:

004

前端开发过程中,可以先用模拟数据来代替后端数据,以便快速完成前端开发。

我们在eventList.js中添加一段模拟的events数据:

  1. Page({
  2. data: {
  3. events: [
  4. {name:'去上班', time: '2016-09-25 12:34:56'},
  5. {name:'接孩子', time: '2016-09-25 15:00:00'},
  6. {name:'去健身', time: '2016-09-25 18:30:00'}
  7. ]
  8. },

重新运行后,可以看到效果:

005

下一步,我们给事件项添加点击事件处理:

  1. <!--eventList.wxml-->
  2. <view class="container event-list">
  3. <block wx:for="{{events}}" wx:for-item="event">
  4. <text id="{{event.id}}" bindtap="bindEventItemTap" class="event-item">{{event.time}} - {{event.name}}</text>
  5. </block>
  6. </view>

注意,要给text设置id,以便点击后访问,此处绑定了bindEventItemTap方法。

回到eventList.js中添加这个方法:

  1. Page({
  2. onLoad: function () {
  3. },
  4. bindEventItemTap: function(obj) {
  5. console.log(obj)
  6. var id = obj.target.id
  7. wx.navigateTo({
  8. url: '../event/event?id='+id
  9. })
  10. }
  11. })

点击一个事件项后,跳转到编辑页面event,同时传递id参数表示选中的事件。

我们新建一个编辑事件的页面event,其中有form表单和输入框和按钮等:

  1. <!--event.wxml-->
  2. <view class="container">
  3. <form bindsubmit="formSubmit">
  4. <view class="section">
  5. <view class="section__title">事件名称</view>
  6. <input name="name" placeholder="请输入事件名称" />
  7. </view>
  8. <view class="section">
  9. <view class="section__title">提醒时间</view>
  10. <input name="time" placeholder="请输入提醒时间" />
  11. </view>
  12. <view class="btn-area">
  13. <button formType="submit">保存</button>
  14. </view>
  15. </form>
  16. </view>

别忘记在app.json中添加新的页面event:

  1. "pages":[
  2. "pages/index/index",
  3. "pages/logs/logs",
  4. "pages/eventList/eventList",
  5. "pages/event/event"
  6. ],

我们编写新的event.js如下:

  1. Page({
  2. data:{
  3. options:{}
  4. },
  5. onLoad:function(options){
  6. // 页面初始化 options为页面跳转所带来的参数
  7. this.setData({options: options})
  8. },
  9. formSubmit: function(e) {
  10. //console.log(e.detail.value)
  11. var id = this.data.options.id
  12. var name = e.detail.value.name
  13. var time = e.detail.value.time
  14. console.log('submit id='+id+', name='+name+', time='+time)
  15. //提交数据到后端
  16. wx.request({
  17. url: '待定',
  18. data: {
  19. id: id,
  20. name: name,
  21. time: time
  22. },
  23. success:function(res) {
  24. console.log('ok')
  25. //返回事件列表页
  26. wx.navigateBack();
  27. },
  28. fail: function() {
  29. console.log('fail')
  30. //返回事件列表页
  31. wx.navigateBack();
  32. }
  33. });
  34. }
  35. })

至此,前端基本功能框架都实现了,细节代码,比如样式布局什么的,大家可以自行完善。但是这个小程序还不能达到演示的要求,因为后端代码还没实现。目前应该很有很多前端不会写后端代码,为了更快的实现后端接口,让DEMO演示起来更加贴近现实,找个简单快速的后端接口平台最节省时间。

连接mashupcloud后端

这个小程序中有2个地方要连接后端:

  • 得到事件列表
  • 提交保存事件信息

我们现在使用免费的后端云平台mashupcloud.cn(聚云)来快速实现后端功能。

打开浏览器访问 http://mashupcloud.cn/ 登陆进入聚云平台:

006

创建一个应用,名称是“我的事件提醒”,点击进入这个应用的界面中:

007

用mashupcloud后端建模和API调用

下面,点击“我的模型”菜单,我们创建数据模型Event,然后,给数据模型添加字段id, name, time,如下图:

008

在mashupcloud中,创建好一个数据模型后,就相当于创建了一个数据库表,同时还自动生成了这个数据模型相关的常用CRUD功能的API,可以对表结构和表数据进行管理,同时还可以调试API。

我们先手工添加几条测试数据,如下图:

009

可以点击“我的API”菜单查看常用的API功能使用说明。

对于我们小程序前端的连接需求,我们使用3个相关的API即可:

  • 得到事件列表,使用LIST的API
  • 提交保存事件信息,添加使用ADD,修改使用EDIT

在访问mashupcloud的API之前,首先要用app的appkey和appsecret进行认证,得到token。

我们在app.js中进行app认证,并把得到的token保存到globalData中。

返回数据示例:[“OK”, “GpjDmxKMBNlpGcHdXpjQlRyDQlzsTOPX”]

  1. //app.js
  2. App({
  3. onLaunch: function () {
  4. //调用API从本地缓存中获取数据
  5. var logs = wx.getStorageSync('logs') || []
  6. logs.unshift(Date.now())
  7. wx.setStorageSync('logs', logs)
  8. //mashupcloud的app认证
  9. auth()
  10. },
  11. auth: function() {
  12. var that = this;
  13. var url = 'http://hw.mashupcloud.cn/mcloud/developer/auth.do'
  14. wx.request({
  15. url: url,
  16. data: {
  17. appkey: '替换为你的appkey',
  18. appsecret: '替换为你的appsecret'
  19. },
  20. success: function(res) {
  21. console.log(res.data)
  22. //返回格式:[“OK”, “token”]
  23. var token = res.data[1]
  24. this.globalData.token = token
  25. }
  26. })
  27. },
  28. globalData:{
  29. userInfo:null,
  30. token:''
  31. }

然后,修改eventList中的url,访问LIST的API。

先获取应用实例:

  1. //获取应用实例
  2. var app = getApp()
  3. Page({

然后,修改url为LIST的API,传递token参数:

  1. onLoad: function () {
  2. var that = this
  3. url = 'http://hw.mashupcloud.cn/mcloud/LIST/Event/'
  4. wx.request({
  5. url: url,
  6. data: {
  7. token: app.globalData.token
  8. },
  9. success: function(res) {
  10. console.log(res.data)
  11. //返回格式:["OK", [翻页数据], [实体列表]]
  12. //把事件列表保存到data中显示
  13. that.data.events = res.data[2]
  14. },

同时,把之前的demo数据去掉:

  1. Page({
  2. data: {
  3. events: []
  4. },

重新启动小程序调试,运行结果如下图,可以看到事件列表数据已经从后端API返回了:

011

最后,我们再修改一下保存事件的url。

  1. //event.js
  2. Page({
  3. data:{
  4. options:{}
  5. },
  6. onLoad:function(options){
  7. // 页面初始化 options为页面跳转所带来的参数
  8. this.setData({options: options})
  9. },
  10. formSubmit: function(e) {
  11. //console.log(e.detail.value)
  12. var id = this.data.options.id
  13. var name = e.detail.value.name
  14. var time = e.detail.value.time
  15. console.log('submit id='+id+', name='+name+', time='+time)
  16. var url = ''
  17. if (id == undefined) {
  18. //添加
  19. url = 'http://hw.mashupcloud.cn/mcloud/ADD/Event/'
  20. }elseelse{
  21. //修改
  22. url = 'http://hw.mashupcloud.cn/mcloud/EDIT/Event/'
  23. }
  24. //提交数据到后端
  25. wx.request({
  26. url: url,
  27. data: {
  28. id: id,
  29. name: name,
  30. time: time
  31. },
  32. success:function(res) {
  33. console.log('ok')
  34. //返回事件列表页
  35. wx.navigateBack();
  36. },
  37. fail: function() {
  38. console.log('fail')
  39. //返回事件列表页
  40. wx.navigateBack();
  41. }
  42. });
  43. }
  44. })

保存后,返回列表页面,数据已经更新了。

完成小程序,结果展示

至此,一个完整的微信公众号小程序就完成了,包括前端和后端的功能都实现了。可以看出,用mashupcloud来实现后端,只要创建数据模型后,甚至都不用写后端代码就能直接调用CRUD等基本功能的API了,这极大的提高了app开发效率。

demo源代码下载:https://pan.baidu.com/s/1bo34IAz

2017-08-05 12:03:15 dreamJuvenile 阅读数 3048
  • 微信公众平台应用开发(开发模式)

    微信公众平台开发教程,该课程内容包括本地调试:业务逻辑测试、消息接收与响应、测试流程;符号表情,微信开发模式,消息加解密等。 讲师:刘运强,网名柳峰,计算机硕士研究生,畅销书《微信公众平台应用开发:方法、技巧与案例》作者。 本课程主要面向有一定Java基础、对微信公众平台开发感兴趣的人员,能够帮助他们入门微信公众平台开发,少走弯路。

    8595 人正在学习 去看看 CSDN讲师

一开始我也找不到原因,后面我换了我的设备跑了一下发现我另一台设备图标已经改过来了,然后我就把微信删除了,从新安装就没问题了,原因应该是我们微信会把之前分享过的小图标缓存下来了


2017-09-20 21:40:41 hadoopxsy 阅读数 3195
  • 微信公众平台应用开发(开发模式)

    微信公众平台开发教程,该课程内容包括本地调试:业务逻辑测试、消息接收与响应、测试流程;符号表情,微信开发模式,消息加解密等。 讲师:刘运强,网名柳峰,计算机硕士研究生,畅销书《微信公众平台应用开发:方法、技巧与案例》作者。 本课程主要面向有一定Java基础、对微信公众平台开发感兴趣的人员,能够帮助他们入门微信公众平台开发,少走弯路。

    8595 人正在学习 去看看 CSDN讲师

众所周知,在我们pc端的浏览器上,当后台改动css,或者js等代码的时候,需要浏览器清除缓存,页面才能重新加载,显示最新的样式或内容;

但是,如果我们的在手机端呢?比如说,我们开发一个微信服务号来实现一个微商场。突然有一天,客户要求升级或者改动一部分样式,这时我们在后台很rasy的搞定了,

但是会发现,微信页面根本样式就没变,搞了一下午原来是缓存的问题!但是发现怎么清理缓存啊!而且大部分用户根本就不知道“缓存”这回事:经过测试和努力找到了一下解决方案:

1、取消关注该微信公众号,重新关注即可(这很影响用户体验)

2、清理微信内存,关闭微信,再重新登录(太折腾)

3、给引入网页的css文件,或超链接  加参数时间戳:time=${time}   (终极解决方案)

例如:

<link rel="stylesheet" href="<%=basePath %>css/public.css?time=${time}">

当后台修改public.css文件内容时,微信服务号会重新加载最新的时间戳内容。这里的${time}  是从后台传过来的System.currentTimeMillis()值


同理,超链接也是如此!


这样做会使每次都重新加载内容会使反映时间加长,不过那也是在用户量访问大的时候!毕竟功能的展现啊!!!


2016-09-28 09:17:47 z714359830 阅读数 8861
  • 微信公众平台应用开发(开发模式)

    微信公众平台开发教程,该课程内容包括本地调试:业务逻辑测试、消息接收与响应、测试流程;符号表情,微信开发模式,消息加解密等。 讲师:刘运强,网名柳峰,计算机硕士研究生,畅销书《微信公众平台应用开发:方法、技巧与案例》作者。 本课程主要面向有一定Java基础、对微信公众平台开发感兴趣的人员,能够帮助他们入门微信公众平台开发,少走弯路。

    8595 人正在学习 去看看 CSDN讲师

微信应用号/小程序开发IDE

交流Q群:294630305

注意:先下0.7版用于登录,再下0.9版用于开发,目前只能本地编译,不能上传

下载声明

  • 相关代码纯属技术研究与爱好,请在学习使用后删除

  • 相关下载资源均来自于QQ群,与作者及贡献者本人无关

  • 当微信官方提供正式版本后,请支持微信官方,一起把应用号做的更好

相关资源

  • 开发工具 v0.7

    • 百度: 链接:http://pan.baidu.com/s/1bFIfBg 密码:4411

  • 开发工具 v0.9

    • 百度: 链接:http://pan.baidu.com/s/1geD6dOJ 密码:hmjk

  • Demo源代码

    • 百度: http://pan.baidu.com/s/1nv1yKwp(密码: 6hpp)

  • 替换文件

    • 百度: http://pan.baidu.com/s/1hr4a77u(密码: e2q5)

破解步骤

Mac测试可用,Windows测试可用

  1. 下载开发工具,并安装(注意:一定要安装0.9版本

  2. 打开『微信Web开发者工具』的程序目录

  • Windows:使用资源管理器查看

  • Mac:右键点击图标,选择『显示包内容』

  • 进入程序目录后,替换以下文件(只需要替换0.9版本里的,0.7版本用来登陆):

    注意,这里微信工程师拼写错了,是stroes没错!!! 更新到0.9.092300之后,再启动会报400013错误,微信工程师把这个文件夹名字改成stores了,再重新按照上面替换就ok了。

    替换的文件上面下载

    • /Resources/app.nw/app/dist/components/create/createstep.js

    • /Resources/app.nw/app/dist/stroes/projectStores.js

    • /Resources/app.nw/app/dist/weapp/appservice/asdebug.js

    • package.nwappdistcomponentscreatecreatestep.js

    • package.nwappdiststroesprojectStores.js

    • package.nwappdistweappappserviceasdebug.js

    • Windows:

    • Mac:

  • Good luck

    扫码无法登录问题 please bind your wechat account to the appid first

    • 先使用0.7版本[Windows|Mac]的进行扫码登陆

    • 登陆成功后,再用0.9版本打开就直接进入了

    项目创建

    1. 运行『微信Web开发者工具』

    2. 通过微信扫描二维码

    3. 创建项目

    • AppID:随便填

    • 项目名称:随便填

    • 本地开发目录:选择一个目录

  • 点击「添加项目」

    • 此时如果出错,先退出再重进

    • 此时,能够看到项目列表了

  • 打开项目

  • 开始开发

  • Good luck

    学习资料

    Demo运行

    • 创建项目

    • 打开项目所在目录

    • 下载「Demo源代码」并解压覆盖

    • 打开项目

    • Good luck

    常见问题

    1. 找不到所要替换的文件

    • 问题原因:开发工具版本不正确,老版本不支持

    • 解决方案:确保下载的程序版本在0.9.092100以上

  • Failed to load resource: net::ERR_NAME_NOT_RESOLVEDhttp://1709827360.appservice.open.weixin.qq.com/appservice

    • 问题原因:通常是由于系统设置了代理如Shadowsocks等。

    • 解决方案:关闭代理,或者依次点击工具栏“动作”-"设置",选择“不使用任何代理,勾选后直连网络”。

  • 修复asdebug.js报错

    • 问题原因:TypeError: Cannot read property 'MaxRequestConcurrent' of undefined

    • 解决方案:替换 /Resources/app.nw/app/dist/weapp/appservice/asdebug.js

  • 扫码登录失败

    • 问题原因:please bind your wechat account to the appid first

    • 解决方案:先使用0.7版本的进行扫码登陆,登陆成功后,再用0.9的版本打开就直接进入了。

  • mac版本升级到0.9.092300后,asdebug.js报错

    • 问题原因:TypeError: Cannot read property 'MaxRequestConcurrent' of undefined

    • 解决方案:替换 /Resources/app.nw/app/dist/weapp/appservice/asdebug.js

    工具截图

    IDE

    IDE


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