2017-05-01 16:41:08 y_f_raquelle 阅读数 3540
  • 微信公众号开发-开发后台设计

    《微信公众号开发-开发后台设计》是子恒老师出品的微信公众号开发系列之一,这套视频教程,使用响应式网站的模式,帮你设计好开发后台,让你在后续的微信公众号开发中更高效。欢迎反馈,QQ/微信:68183131

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

微信公众平台开发者文档:http://mp.weixin.qq.com/wiki/home/index.html


首先申请一个微信公众开发测试账号:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login


申请后会提供appID和appsecret,你需要在自己的代码中添加接口配置的处理。

但此处URL必须为一个公网地址,且使用80端口,这就涉及到之前讲到的公网映射的方式。通常使用ngrok,注册后获得authtoken并配置,使用ngrok http <port>即可将指定端口映射到公网80端口。

接口配置的java示例:(参考Journey的博客

@WebServlet(urlPatterns = "/wx", name = "wxHouseKeeperServlet")  
public class HouseKeeper extends HttpServlet {  
    public static final String TOKEN = "mzmzo";  
  
    @Override  
    protected void doGet(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
        try {  
            // 开发者提交信息后,微信服务器将发送GET请求到填写的服务器地址URL上,GET请求携带参数  
            String signature = request.getParameter("signature");// 微信加密签名(token、timestamp、nonce。)  
            String timestamp = request.getParameter("timestamp");// 时间戳  
            String nonce = request.getParameter("nonce");// 随机数  
            String echostr = request.getParameter("echostr");// 随机字符串  
            PrintWriter out = response.getWriter();  
            // 将token、timestamp、nonce三个参数进行字典序排序  
            String[] params = new String[] { TOKEN, timestamp, nonce };  
            Arrays.sort(params);  
            // 将三个参数字符串拼接成一个字符串进行sha1加密  
            String clearText = params[0] + params[1] + params[2];  
            String algorithm = "SHA-1";  
            String sign = new String(  
                    Hex.encodeHex(MessageDigest.getInstance(algorithm).digest((clearText).getBytes()), true));  
            // 开发者获得加密后的字符串可与signature对比,标识该请求来源于微信  
            if (signature.equals(sign)) {  
                response.getWriter().print(echostr);  
            }  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }     
}  

此处TOKEN与网页中填写的Token一致即可

接下来配置“网页授权获取用户基本信息


注意填写时不用加http://,只填写域名即可。

完成后扫描下方二维码即可关注自己的公众测试号,网页中会显示关注用户的Openid。

下载微信Web开发工具,即可模拟手机调试


完成登录和绑定后,开发者就可以开始调试微信网页授权,在地址栏直接输入URL

示例: https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx841a97238d9e17b2&redirect_uri=http://cps.dianping.com/weiXinRedirect&response_type=code&scope=snsapi_base&state=type%3Dquan%2Curl%3Dhttp%3A%2F%2Fmm.dianping.com%2Fweixin%2Faccount%2Fhome

这里appid填写之前注册后得到的,redirect_uri指向自己的公网域名下的url,response_type为code,scope为snsapi_base表示静默授权,state填写uri后的mapping。注意这里的redirect_uri和state可能需要urlencode。








2019-12-12 00:10:18 qq_41219586 阅读数 21
  • 微信公众号开发-开发后台设计

    《微信公众号开发-开发后台设计》是子恒老师出品的微信公众号开发系列之一,这套视频教程,使用响应式网站的模式,帮你设计好开发后台,让你在后续的微信公众号开发中更高效。欢迎反馈,QQ/微信:68183131

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

1.说明:前端使用微信开发者工具,后台用ideal,后台框架为springboot+mybatisplus 本文主要内容是实现从数据库查询数据并运用在页面上的整个流程

后台不会搭建的可以点击下面的链接看下另一篇博客
链接

2.数据库表的数据以及显示效果

在这里插入图片描述
在这里插入图片描述

3.后台关键代码

(1)action层

  /**
     * 查找商品的类别 返回数组类型的数据
     * */
    @RequestMapping("/findclassify")
    public ArrayList findclassify(){
        ArrayList classify =  goodsService.findclassify();
        System.out.println(classify);
        return classify;
    }

(2)service层

 public ArrayList findclassify() {
        return goodsDao.findclassify();
    }

(3)dao层

public ArrayList findclassify();

(4)mapper映射文件

    <select id="findclassify" resultType="java.lang.String">
        select  classify_name from t_classify ;
    </select>

4.前台关键代码

(1)wxml代码
key==index?‘is_checked’:‘classify_normal’–>根据点击与未点击的部分显示不同样式,具体查看下面的博客
链接

  <!-- 左边分类栏 -->
  <view class="left">
   <!-- wx:for遍历js中的classify1数组并显示-->
    <view wx:for="{{classify1}}"  wx:key="key" data-url="{{item.classify_id}}"  >
      <view class="{{key==index?'is_checked':'classify_normal'}}" bindtap="Checked"  data-index='{{index}}'>{{item}} </view>
    </view>
  </view>

(2)wxss代码

/*左边分类模块*/
.left{
  width: 160rpx;
  min-height: 1000rpx;
  background-color: white;
}
/*点击前的样式*/
.classify_normal{
width: 160rpx;
height: 110rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #E4E4E4;
border-top: solid 1rpx white;
}
/*被点击选中后的样式*/
.is_checked{
width: 158rpx;
height: 110rpx;
display: flex;
justify-content: center;
align-items: center;
background-color:white;
border-bottom: solid 2rpx #E4E4E4;
border-left: solid 4rpx red;
}

(3)js代码

 /**
   * 页面的初始数据
   */
  data: {
    classify1:[
    ],
    key:0
    }
     /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    /**
     * 查询商品有哪些类型
     */
    // findclassify:是action层@RequestMapping内对应的值,
    wx.request({
      url: 'http://localhost:8080/findclassify',
      success:function(e){
      /*把查出来的数据赋值给classify1数组*/
        that.setData({
          classify1: e.data
        }) 
      }
    })

该方法并没有向数据库传参数 ,只是一个简单的查询;
如果是要传参数到后台,那么在wx.request里加上一个data:{}就可以了;代码如下
findgoods:是action层@RequestMapping内对应的值,

   wx.request({
      url: 'http://localhost:8080/findgoods',
      data:{
			classify:classify的值
		}
    })

后台数据接收如下:
在这里插入图片描述

2019-11-24 16:19:34 weixin_45330741 阅读数 23
  • 微信公众号开发-开发后台设计

    《微信公众号开发-开发后台设计》是子恒老师出品的微信公众号开发系列之一,这套视频教程,使用响应式网站的模式,帮你设计好开发后台,让你在后续的微信公众号开发中更高效。欢迎反馈,QQ/微信:68183131

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

微信小程序项目实战 —— 1.2 开发工具下载

1.2.1 开发公具

1、名称:微信开发者工具;
2、简介:
(1)图标:

在这里插入图片描述

(2)仅支持 Windows 7 及以上版本
3、下载方式:
(1)下载链接:微信开发者工具
(2)公众号后台下载:

( a )登录 微信公众平台(前提是得有公众号);
微信公众平台首页
( b ) 登录进公众号后台后,点击 “ 首页 > 开发 > 开发者工具 > 开发者文档 ”
( c )打开的文档默认为 “ 公众号 ” 文档,需点击左上角下拉列表选择 “ 小程序 ”在这里插入图片描述
在这里插入图片描述
( d )点击 “ 起步 > 安装开发者工具 > 开发者工具下载页面 ”
在这里插入图片描述
( e )点击 “ Stable Build "
在这里插入图片描述
( f )根据自己电脑的操作系统进行下载
在这里插入图片描述

4、创建小程序项目

( a )在登录页,可以使用微信扫码登陆开发者工具,开发者工具将使用这个微信帐号的信息进行小程序的开发和调试
在这里插入图片描述
( b )登录成功,会显示如下图所示的项目列表。记 得点击 ” 小程序 “,再点击 大 ” + “ 号;
在这里插入图片描述
( c )将之前申请的 APPID 填入 ” APPID “ 框,再选择 ” 不使用后端服务 “ 和 ” JavaScript "
在这里插入图片描述
( d )进入开发者工具 —— 主界面。开发者工具主界面,从上到下,从左到右,分别为:菜单栏、工具栏、模拟器、编辑器、调试器 五大部分
在这里插入图片描述

5、总结

最简单的办法就是,直接点击 微信开发者工具 链接,下载开发工具,再动动手自己玩一下。

2016-10-04 18:59:39 qq_35015657 阅读数 1058
  • 微信公众号开发-开发后台设计

    《微信公众号开发-开发后台设计》是子恒老师出品的微信公众号开发系列之一,这套视频教程,使用响应式网站的模式,帮你设计好开发后台,让你在后续的微信公众号开发中更高效。欢迎反馈,QQ/微信:68183131

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

开发网址

点击打开链接

使用自己的微信号来调试微信网页授权

Tools_006.jpg

  • 为了保证开发者身份信息的安全,对于希望调试的公众号,我们要求开发者微信号与之建立绑定关系。具体操作为:公众号登录管理后台,启用开发者中心,在开发者工具——web 开发者工具页面,向开发者微信号发送绑定邀请。绑定页面如下图所示:

Tools_002.jpg

  • 开发者在手机微信上接受邀请,即可完成绑定。每个公众号最多可同时绑定10个开发者微信号。邀请确认页面如下图所示:

Tools_003.jpg

  • 完成登录和绑定后,开发者就可以开始调试微信网页授权了,注意只能调试自己绑定过的公众号

非静默授权的 URL 样例 https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx841a97238d9e17b2&redirect_uri=http://cps.dianping.com/weiXinRedirect&response_type=code&scope=snsapi_userinfo&state=type%3Dquan%2Curl%3Dhttp%3A%2F%2Fmm.dianping.com%2Fweixin%2Faccount%2Fhome

在微信 web 开发者工具中打开类似的授权页 URL(样例不可直接使用,请更换为绑定完成的公众号授权页URL),webview 模拟器显示效果如图:

Web-developer-tools-02.jpg

点击“确认登录”即可带着用户信息跳转到第三方页面,很方便的进行后续的开发和调试。

静默授权的 URL 样例 https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx841a97238d9e17b2&redirect_uri=http://cps.dianping.com/weiXinRedirect&response_type=code&scope=snsapi_base&state=type%3Dquan%2Curl%3Dhttp%3A%2F%2Fmm.dianping.com%2Fweixin%2Faccount%2Fhome

在微信 web 开发者工具中打开类似的授权页 URL(样例不可直接使用,请更换为绑定完成的公众号授权页URL)则会自动跳转到第三方页面。

注意:如果使用了代理,需代理本身支持https直连,才能调试https页面。


2.调试、检验页面的 JS-SDK 相关功能与权限,模拟大部分 SDK 的输入和输出

通过 web 开发者工具,可以模拟 JSSDK 在微信客户端中的请求,并直观地看到鉴权结果和 log。以微信 JSSDK DEMO 页面为例:

http://demo.open.weixin.qq.com/jssdk

在调试器中打开该 URL,可以方便地在右侧的 JS-SDK Tab 中看到当前页面 wx.config 的校验情况和 JSSDK 的调用 log


移动调试

移动调试功能是基于 weinre 的,并且做了一些改进,相比直接使用 weinre 有两个优点:

  • 无须手工在页面中加入 weinre 调试脚本
  • 可以在 weinre 的网络请求页卡中,看到完整的 http 请求 log,非局限于 ajax 请求

如下图所示:

Web-developer-tools-08.jpg

注意,移动调试功能暂不支持https。


Chrome DevTools

微信 web 开发者工具集成了 Chrome DevTools。同之前在 PC 上的调试体验一致,可以快速上手。

如下图所示:

Web-developer-tools-09.jpg


下载地址

最新版本: (2016.2.22) 0.3.0

更新内容:

  • 修复部分已知的 bug
  • 新增支持微信企业号

Windows 64位版本:下载地址

 MD5: e74dd9499379ad93c68a952133eb7116

Windows 32位版本:下载地址

 MD5: b69a7d94a045430a1d8216950cb27199

Mac版本:下载地址

 MD5: 4024846d39293b492cec0d83edd97b73

注:支持 win7 及以上版本,支持OS X 10.8 及以上版本


2019-05-31 18:06:42 u014650759 阅读数 97
  • 微信公众号开发-开发后台设计

    《微信公众号开发-开发后台设计》是子恒老师出品的微信公众号开发系列之一,这套视频教程,使用响应式网站的模式,帮你设计好开发后台,让你在后续的微信公众号开发中更高效。欢迎反馈,QQ/微信:68183131

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

上篇文章提到了,作为微信小程序开发者,在开发学习前需要做的准备工作,也就是通过邮箱和微信注册申请小程序的开发https://blog.csdn.net/u014650759/article/details/90694300。这篇文章,也是开发前的准备,了解编译器,即微信开发者工具。

1.这里先登录微信公众平台后台界面,点击开发工具链接,如下图

2.将跳转到概览介绍,点击微信开发者工具链接

3.选择要下载的版本进行下载并安装,安装过程在此略过,跟一般的软件没什么区别。

4.打开软件,弹出编译器软件界面,大致如下图,这里由于我打开过几个小程序,所以有一些项目加载了出来。

5.点击右边显示空白,只有一个加号的图标卡片,创建或导入项目。这里我下载的一个官方示例,地址https://github.com/wechat-miniprogram/miniprogram-quickstart,要将这个下载的小项目导入进来。

6.选择项目目录,项目名称将自动显示,然后这里的AppID可以用前面我们获取的AppID,也可以用测试号,点击新建即可加载打开此项目。如下图:

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