• 通过本课程的学习,学员能够入门微信公众平台开发,能够胜任企业级的订阅号、服务号、企业号的应用开发工作。 通过本课程的学习,学员能够对微信公众平台有一个清晰的、系统性的认识。例如,公众号是什么,它有...
  • 微信小程序开发实战

    2019-04-01 14:05:00
    本套课程使用了元认知教学法,直接实战式教学,摆脱学院派的理论式讲解,对于0基础的学员可以入门编写微信小程序,过程中指导如何学习使用文档查阅接口等,通过两个完整的实战小项目的实例,入手小程序开发
  • Web开发微信小程序

    2018-06-21 00:01:32
    所以这里只是想分享一下一个Web开发人员半吊子前端水平如何写出一个小程序。 准备条件 微信开发者工具,去官网下载 微信小程序账号注册一个,https://mp.weixin.qq.com/ ES6,这个我觉得Java程序员应该都...

    闲来无事,突然想写一个小程序,于是好好的周五的晚上写了一晚上代码,从完全不知道什么情况(我的JavaScript水平很差的),到愣是写好了一个已经发布了的小程序。所以这里只是想分享一下一个Web开发人员半吊子前端水平如何写出一个小程序。

    准备条件

    小程序和Web开发的相似点

    其实小程序和Web开发还是有很多相似之处的,只要知道这些,开发起来也会容易很多。当然开始开始先简单阅读下官方文档的get start。

    视图层

    WXML

    这个后缀的文件其实就和JSP或者其他模板一样,里面有些微信自己封装的标签和属性,参照官方文档写就行了。

    WXSS

    这个文件其实就是css文件,所有样式都放在里面就好。

    逻辑层

    JS文件就是用来处理各种业务逻辑的地方,当计算好的结果要返回给视图层的时候,只需要将数据放入page对象的pageData.data,用setData方法就好。

    配置层

    app.json,该文件用于配置当前app的常用配置,比如将要所有页面都注册到这个配置文件里面。

    Troubleshooting

    • 每次修改了pageData的data内容的时候,一定要调用setData方法,这里就跟flux有点相似,修改了store的内容,需要通知到视图层去更新。
    • 每个page的data,和css都相互独立,意思是说pageData这个对象的scope是只是当前page。
    • 全局变量建议定义在app.js里面。
    • app.wxss是公共的css文件,会被page里面的覆盖。

    部署

    微信小程序分为开发版,体验版和正式版。

    开发版

    这个只需要点击用手机扫面预览二维码就可以,但是只限于自己绑定的微信账号和给了权限的账号,一般用于开发人员。

    体验版

    这个需要上传代码到微信服务器,同样也需要授权给部分微信账号,才可以使用,一般用于测试人员(我猜的)。

    正式版

    这个就是正式发布后的,所有人都可以在手机上面搜索到该版本,但是需要提交给微信审核,审核通过之后方可发布。

    附录

    写好的小程序源码:https://github.com/vurtnec/vPassword

    展开全文
  • 范围:开发所有的微信web页面 下载地址:http://www.chtml.cn/topic/show/49 实例一、Button按钮可以使用a或者button标签。wap上要触发按钮的active态,必须触发ontouchstart事件,可以在body上加上ontouchstart=...

    框架:微信ui开发框架
    范围:开发所有的微信web页面
    下载地址:http://www.chtml.cn/topic/show/49

    实例一、Button

    按钮可以使用a或者button标签。wap上要触发按钮的active态,必须触发ontouchstart事件,可以在body上加上ontouchstart=”“全局触发。

    按钮常见的操作场景:确定、取消、警示,分别对应class:weui_btn_primary、weui_btn_default、weui_btn_warn,每种场景都有自己的置灰态weui_btn_disabled,除此外还有一种镂空按钮weui_btn_plain_xxx,客户端webview里的按钮尺寸有两类,默认宽度100%,小型按钮宽度自适应,两边边框与文本间距0.75em:
    效果图:
    这里写图片描述

    代码片段:

    <a href="javascript:;" class="weui_btn weui_btn_primary">按钮</a>
    <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a>
    <a href="javascript:;" class="weui_btn weui_btn_warn">确认</a>
    <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn">确认</a>
    <a href="javascript:;" class="weui_btn weui_btn_default">按钮</a>
    <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">按钮</a>
    <div class="button_sp_area">
        <a href="javascript:;" class="weui_btn weui_btn_plain_default">按钮</a>
        <a href="javascript:;" class="weui_btn weui_btn_plain_primary">按钮</a>
    
        <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">按钮</a>
        <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">按钮</a>
    </div>

    实例二、Cell

    Cell,列表视图,用于将信息以列表的结构显示在页面上,是wap上最常用的内容结构。Cell由多个section组成,每个section包括section headerweui_cells_title以及cellsweui_cells。

    cell由thumnailweui_cell_hd、bodyweui_cell_bd、accessoryweui_cell_ft三部分组成,cell采用自适应布局,在需要自适应的部分加上classweui_cell_primary即可:

    效果图:
    这里写图片描述

    代码片段:

    <!--带说明的列表项-->
    <div class="weui_cells_title">带说明的列表项</div>
    <div class="weui_cells">
        <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
                <p>标题文字</p>
            </div>
            <div class="weui_cell_ft">
                说明文字
            </div>
        </div>
    </div>

    Cell可根据需要进行各种自定义扩展,包括辅助说明、跳转、单选、复选等。下面以带图标、说明、跳转的列表项,其他情况可以直接参考example下的代码:

    <div class="weui_cells_title">带图标、说明、跳转的列表项</div>
    <div class="weui_cells weui_cells_access">
    
        <a class="weui_cell" href="javascript:;">
            <div class="weui_cell_hd">
                <img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
            </div>
            <div class="weui_cell_bd weui_cell_primary">
                <p>cell standard</p>
            </div>
            <div class="weui_cell_ft">
                说明文字
            </div>
        </a>
        <a class="weui_cell" href="javascript:;">
            <div class="weui_cell_hd">
                <img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
            </div>
            <div class="weui_cell_bd weui_cell_primary">
                <p>cell standard</p>
            </div>
            <div class="weui_cell_ft">
                说明文字
            </div>
        </a>
    </div>

    实例三、Dialog

    若系统的alert窗体无法满足网页的临时视图内容需求,则可以自定义实现与alert形式相似的dialog,并且在dialog中可以自定义地使用各种控件,来满足需求。

    这里写图片描述

    代码片段:

    <div class="weui_dialog_confirm">
        <div class="weui_mask"></div>
        <div class="weui_dialog">
            <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>
            <div class="weui_dialog_bd">自定义弹窗内容<br>...</div>
            <div class="weui_dialog_ft">
                <a href="javascript:;" class="weui_btn_dialog default">取消</a>
                <a href="javascript:;" class="weui_btn_dialog primary">确定</a>
            </div>
        </div>
    </div>

    这里写图片描述

    代码片段:

    <div class="weui_dialog_alert">
        <div class="weui_mask"></div>
        <div class="weui_dialog">
            <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>
            <div class="weui_dialog_bd">弹窗内容,告知当前页面信息等</div>
            <div class="weui_dialog_ft">
                <a href="javascript:;" class="weui_btn_dialog primary">确定</a>
            </div>
        </div>
    </div>

    实例四、Toast

    toast用于临时显示某些信息,并且会在数秒后自动消失。这些信息通常是轻量级操作的成功、失败或等待状态信息。

    这里写图片描述

    代码片段:

    <div id="toast" style="display: none;">
        <div class="weui_mask_transparent"></div>
        <div class="weui_toast">
            <i class="weui_icon_toast"></i>
            <p class="weui_toast_content">已完成</p>
        </div>
    </div>

    这里写图片描述

    <div id="loadingToast" class="weui_loading_toast" style="display:none;">
        <div class="weui_mask_transparent"></div>
        <div class="weui_toast">
            <div class="weui_loading">            <!-- :) -->
                <div class="weui_loading_leaf weui_loading_leaf_0"></div>
                <div class="weui_loading_leaf weui_loading_leaf_1"></div>
                <div class="weui_loading_leaf weui_loading_leaf_2"></div>
                <div class="weui_loading_leaf weui_loading_leaf_3"></div>
                <div class="weui_loading_leaf weui_loading_leaf_4"></div>
                <div class="weui_loading_leaf weui_loading_leaf_5"></div>
                <div class="weui_loading_leaf weui_loading_leaf_6"></div>
                <div class="weui_loading_leaf weui_loading_leaf_7"></div>
                <div class="weui_loading_leaf weui_loading_leaf_8"></div>
                <div class="weui_loading_leaf weui_loading_leaf_9"></div>
                <div class="weui_loading_leaf weui_loading_leaf_10"></div>
                <div class="weui_loading_leaf weui_loading_leaf_11"></div>
            </div>
            <p class="weui_toast_content">数据加载中</p>
        </div>
    </div>

    实例五、Msg Page

    结果页通常来说可以认为进行一系列操作步骤后,作为流程结束的总结性页面。结果页的作用主要是告知用户操作处理结果以及必要的相关细节(可用于确认 之前的操作是否有误)等信息;若该流程用于开启或关闭某些重要功能,可在结果页增加与该功能相关的描述性内容;除此之外,结果页也可以承载一些附加价值操 作,例如提供抽奖、关注公众号等功能入口。

    这里写图片描述

    代码片段:

    <div class="weui_msg">
        <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
        <div class="weui_text_area">
            <h2 class="weui_msg_title">操作成功</h2>
            <p class="weui_msg_desc">内容详情,可根据实际需要安排</p>
        </div>
        <div class="weui_opr_area">
            <p class="weui_btn_area">
                <a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>
                <a href="javascript:;" class="weui_btn weui_btn_default">取消</a>
            </p>
        </div>
        <div class="weui_extra_area">
            <a href="">查看详情</a>
        </div>
    </div>

    实例六、Article

    文字视图显示大段文字,这些文字通常是页面上的主体内容。Article支持分段、多层标题、引用、内嵌图片、有/无序列表等富文本样式,并可响应用户的选择操作。

    在微信客户端webview中使用Article,必须保证文字有足够的可读性和可辨识性、使用规范字体、保证足够的段间距、段首无缩进。

    这里写图片描述

    代码片段:

    <article class="weui_article">
        <h1>大标题</h1>
        <section>
            <h2 class="title">章标题</h2>
            <section>
                <h3>1.1 节标题</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute</p>
            </section>
            <section>
                <h3>1.2 节标题</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </section>
        </section>
    </article>

    实例七、图标

    这里写图片描述

    代码片段:

    <i class="weui_icon_msg weui_icon_success"></i>
    <i class="weui_icon_msg weui_icon_info"></i>
    <i class="weui_icon_msg weui_icon_warn"></i>
    <i class="weui_icon_msg weui_icon_waiting"></i>
    <i class="weui_icon_safe weui_icon_safe_success"></i>
    <i class="weui_icon_safe weui_icon_safe_warn"></i>
    <div class="icon_sp_area">
        <i class="weui_icon_success"></i>
        <i class="weui_icon_success_circle"></i>
        <i class="weui_icon_success_no_circle"></i>
        <i class="weui_icon_info"></i>
        <i class="weui_icon_waiting"></i>
        <i class="weui_icon_waiting_circle"></i>
        <i class="weui_icon_circle"></i>
        <i class="weui_icon_warn"></i>
        <i class="weui_icon_download"></i>
    </div>

    注释:可以做很多的微信页面,非常好用好使。

    展开全文
  • C#开发微信订阅号、服务号
  • 该课程适合有微信企业号、微信服务号基础或具有一定的C# web开发基础的学员。 “一对一在线班讲解”,在标准版知识结构的基础上,全面讲解企业微信的各个技术点,涵盖企业微信的全部内容,提供企业微信开发工具包...
  • 自己开发一套微信支付接口(SDK)是子恒老师《子恒说微信开发》视频教程的第15部。详细讲解了用php开发一套自己的微信支付接口。内容包含微信支付开发思路,基础类开发,微信支付接口应用,公众号发红包,企业付款等等...
  • 微信开发之入门教程

    2016-01-12 10:55:26
    其实微信开发web开发没有多大的区别,只是经过了微信,然后再由浏览器打开。因为经过微信,因此你的web会附加一些微信平台所提供的一些功能,如获取用户地理位置、获取微信用户头像、拍照上传、

    时间葱葱,小宝鸽入职也有半年了,刚入的时候刚好有负责开发一个微信企业号的新项目。从项目的一无所有到第一版上线,再一步步完善升级。期间学到了许多东西。对微信开发也是有了一定的认识。在此,小宝鸽再次无私地分享给大家啦。

    其实微信开发跟web开发没有多大的区别,只是经过了微信,然后再由浏览器打开。因为经过微信,因此你的web会附加一些微信平台所提供的一些功能,如获取用户地理位置、获取微信用户头像、拍照上传、发送微信消息等等,通过微信接口即可调用。要将web项目挂靠在微信公众平台上是需要一个帐号的。微信公众平号分为服务号、订阅号、企业号。这三种帐号有一些小区别,但是开发流程都是差不多的,只是开放的功能上有些区别,知道其中一种开发,其他的也差不多。关于具体区别先不作过多介绍,后面的文章会讲到。接下来我们以企业号为例带大家进入微信开发之旅。

    接下来将从下面几个角度带大家了解微信开发:

    (1)申请企业号体验号
    (2)企业号的一些配置
    (3)微信JS接口调用

    好了现在马上开始:

    一、申请企业号体验号

    1.1、首先来到微信企业号的网址 https://qy.weixin.qq.com/

    这里写图片描述

    1.2、可以看到“开发者中心”字眼,点击进入相应页面

    这里写图片描述

    1.3、进入后可以看到“欢迎你,开发者”的公告,右侧有个“申请体验号”,点击进入相应页面。

    这里写图片描述

    1.4、进入“申请体验号”后,可以看到注册流程,按照注册流程填写相应资料并申请,验证邮箱绑定微信号后体验号就申请成功啦。

    这里写图片描述

    1.5、申请成功之后,回到https://qy.weixin.qq.com/,用微信扫一扫扫描登录下方的二维码,输入对应密码即可登录成功,来到你的微信企业号首页啦。

    这里写图片描述

    二、企业号的一些配置

    2.1、添加子部门,如下图,将鼠标放到“企业号体验43560625”就会出现小下标,然后点击添加子部门,填写好信息保存,然后刷新页面即可。

    这里写图片描述
    这里写图片描述

    2.2、添加成员,点击通讯录,然后如下图进行操作,即可添加成员。部门选择刚刚添加的部门

    这里写图片描述

    2.3、然成员关注该企业号,如果添加成员的时候有输入邮箱,可以在通讯录的成员管理那里给成员发送关注邀请,邀请会将企业号二维码发送到对应成员邮箱。另外一种方法直接点击“设置”即可看到体验号二维码。让成员扫这个二维码关注也是可以的(需要注意的是,体验号只能最多关注10个成员哦)。另外下图中的CorpID (wx7099477f2de8aded)非常重要的,先记录起来,下面接口微信JS调用的时候会用到。

    这里写图片描述

    2.4、添加管理组,点击“设置”–>”权限管理”,就会跳转到下图页面,然后“新建管理组”,选择管理员的时候,如果提示该成员已在其他管理组,那么估计需要添加成员了。小宝鸽添加了一个管理组“测试”,添加成功后如下图。其中Secret也是非常重要的东西,之后JS接口调用获取签名需要用到。

    这里写图片描述

    2.5、应用管理。猿友们可以看到左侧菜单中有个”应用中心”。点击应用中心将来到下图页面。”企业小助手”就是本企业号默认存在的一个应用。猿友们可以自行创建更多的应用。

    这里写图片描述

    点击”企业小助手”将会来到下面的界面,默认是回调模式,我们需要设置成普通模式。

    这里写图片描述

    点击”普通模式”,启用模式,然后启用”自定义菜单”。

    这里写图片描述

    自定义菜单启用完成之后,点击自定义菜单中的设置,将会跳转到如下页面:

    这里写图片描述

    添加菜单”测试”,然后设置”微信信息”,内容为”测试啦啦啦”,保存–>发布,然后右边有个预览,点击菜单”测试”,就会自动回复消息,如下图:

    这里写图片描述

    菜单响应除了发送微信消息也可以是跳转到某个链接,因为跳转链接是需要配置可信域名的,因此先介绍如何配置可信域名
    应用管理还有一个地方需要设置的,那就可信域名,如下图,回到”企业小助手”应用的详情页面,添加可信域名,可信域名是有一些要求的(1. 设置的应用域名须通过ICP备案的验证,2. 请使用二级或二级以上域名),这里小宝鸽网上找了一个”yo.bbdfun.com”,猿友们也可以使用这个

    这里写图片描述

    配置了可信域名之后呢,猿友们可以配置跳转到链接的菜单啦,注意配置的url必须是已可信域名作为域名哈,例如:

    这里写图片描述

    三、微信JS接口调用

    3.1、微信提供了一系列的JS接口,使得公众号企开发十分快捷高效,微信JS-SDK接口:
    http://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3
    各位猿友们可粗略看一下上面文档,便可知道大概提供的一些功能。

    3.2、各位猿友们粗略看完”微信JS-SDK接口”,应该有看到下图的说明吧,接口的使用是需要注入权限验证配置的,现在我们上面的体验号等等的一系列操作就派上用场啦。

    这里写图片描述

    3.3、接下来将会一点点向大家介绍怎么调用微信接口啦

    微信接口文档之后的猿友们应该都知道微信接口的调用步骤如下:

    这里写图片描述

    最重要的还是步骤二:权限验证配置。里面有几个参数,小宝鸽将会为猿友们一一介绍:
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
    appId: ”, // 必填,企业号的唯一标识,此处填写企业号corpid
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: ”, // 必填,生成签名的随机串
    signature: ”,// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

    debug、appId和jsApiList相信各位猿友们应该都知道大概是什么东西。那么现在给各位猿友们重点介绍:timestamp、nonceStr、signature。
    其实timestamp、nonceStr是用来生成signature的。
    js生成时间戳方法:timestamp = Date.parse(new Date()); //1414587457
    另外,nonceStr也是一串随机串,我们也用时间戳就好了nonceStr=Date.parse(new Date()); //1414587457

    剩下的就是最关键的signature生成方法,这里需要引入access_token概念
    生成signature签名第一步获得access_token:
    浏览器输入:https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=wx5f24fa0db1819ea2&corpsecret=uQtWzF0bQtl2KRHX0amekjpq8L0aO96LSpSNfctOBLRbuYPO4DUBhMn0_v2jHS-9
    即可得到access_token:YoxXjnJS57r8gk5Nf-Ki_mSvn98fILxv56EE7NFWE3qQNOH3OaW4iDWwLc05g1mdbuNhipK8fgy-q-pA93DqFw(其有效期为7200秒,即两个小时)

    这里写图片描述

    生成signature签名第二步通过access_token获得ticket:
    浏览器输入:https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=YoxXjnJS57r8gk5Nf-Ki_mSvn98fILxv56EE7NFWE3qQNOH3OaW4iDWwLc05g1mdbuNhipK8fgy-q-pA93DqFw
    即可得到ticket:”sM4AOVdWfPE4DxkXGEs8VLMMSNOZxIv5IhnWCyv5sA4UgJuWuMQdfMCeyC5kSL_c7OIMGeETC2y9PXfLbFIFNw(其有效期也是7200秒,即两个小时)

    这里写图片描述

    生成signature签名第三步通过ticket以及下面参数拼成字符串:
    noncestr=1414587457
    jsapi_ticket(即上面的ticket)=sM4AOVdWfPE4DxkXGEs8VLMMSNOZxIv5IhnWCyv5sA5kumyWTQ2VcKEcphBAW62J_HUgmaiKEQ3qhwj5Vlqq7g
    timestamp=1414587457
    url=http://mp.weixin.qq.com

    通过上面的参数拼成(注意参数顺序必须一样):jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VLMMSNOZxIv5IhnWCyv5sA5kumyW
    TQ2VcKEcphBAW62J_HUgmaiKEQ3qhwj5Vlqq7g
    &noncestr=1414587457&timestamp=1414587457&url=http://mp.weixin.qq.com

    最后利用上面的字符串进行sha1加密,有在线的校验工具http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign。但是真正开发的时候肯定是需要写代码的,下面附上sha1加密的java算法:`

    jdk也有提供这个java.security这个包,里面封装好了sha1加密算法。使用方法可参考博主的另外一篇博客AES加密解密 SHA1、SHA加密 MD5加密

    注意真正获取access_token、ticket的时候是需要通过代码实现的,上面在浏览器输入对应地址获取只是为了理顺流程。下面是通过java代码获取。

    3.4、java代码获取签名

    关于使用java代码获取签名的详细过程请参考博主的另外一篇文章 微信开发之使用java获取签名signature(贴源码,附工程)

    该文章有详细的代码,而且附工程下载。

    获取到了签名之后就可以调用微信js接口了,例子后面的文章将会讲到。

    展开全文
  • 基于python的微信公众号开发教程
  • 微信公众平台开发微信编辑器开发是子恒老师《微信公众平台开发》视频教程的第11部。详细讲解了用php进行微信编辑器的开发。内容包含微信公众号编辑器开发思路,编辑器前端页面,功能实现,添加新样式等等。欢迎...
  • 微信公众号开发-开发后台设计》是子恒老师出品的微信公众号开发系列之一,这套视频教程,使用响应式网站的模式,帮你设计好开发后台,让你在后续的微信公众号开发中更高效。欢迎反馈,QQ/微信:68183131
  • Web微信主要参考Web微信协议进行设计开发 项目主要分成三大模块 登录模块:微信扫码登录流程 微信容器:微信信息、会话接收发送、心跳监测 数据存储:用户登录信息、状态信息、会话信息 先祭图拜八哥已...

    Web版微信登录

    github地址:https://github.com/hty7/vue-wechat
    如有不足与错误,请见谅

    Web版微信主要参考Web微信协议进行设计开发
    项目主要分成三大模块
    登录模块:微信扫码登录流程
    微信容器:微信信息、会话接收发送、心跳监测
    数据存储:用户登录信息、状态信息、会话信息

    先祭图拜八哥已求无bug

    这里写图片描述

    效果图
    我们希望实现的功能包括基本的登录、聊天群发功能(文本/表情/图片/文件/公众号链接)、公众号阅读、聊天记录导出保存、用户画像、聊天机器人

    这里写图片描述

    前期工作准备

    DEMO主要采用web微信接口进行开发,因此在实际开发中必须调用微信接口(https://cn.vuejs.org/v2/guide/custom-directive.html)
    问题:

    1. 接口跨域问题(本地开发跨域、cookie)
    2. 状态检测问题(心跳检测,微信会话活动中必须保持心跳接口的正常联接)
    3. 接口前缀问题(微信常用有wx及wx2两个版本)
    4. 数据存储问题(用户通讯录的用户UserName会随着每次登录而改变,因此必须通过特殊方法处理数据一致性及连贯性)

    在前期我们需要解决(1)(2)两个问题
    由于项目里使用vue+axios+webpack本地开发,请求如下

    // 获取微信唯一uid
    export const getUUID = params => {
      return axios.get('/login/jslogin', {params: params})
    }

    开发阶段使用***http-proxy-middleware***解决跨域问题

    '/login': {
        target: 'https://login.wx.qq.com', // 重定向路径
        secure: false, // htts转http证书验证问题
        changeOrigin: true,
        headers: { // 设置报头
          Referer: 'https://login.wx.qq.com'
        },
        pathRewrite: { // 路径重写
          '^/login': '/'
        }
      }

    通过上面代理,可以将本地*localhost:8080//login/jslogin => https://login.wx.qq.com/jslogin*完成跨域操作
    但上面的方面还不能完全解决跨域问题,在后面的请求我们可以知道心跳checkasync和通讯录头像等请求都需要使用到cookie,因此我们必须将wx.qq.com域名下返回的cookie保存的本地域名下,因此我们必须解决跨域cookie的问题

    这里写图片描述

    因此我们可以通过配置proxy进行跨域处理,通过cookieDomainRewrite重写domian,我们可以将不同域名下的cookie保存到我们所需域名下。同时由于默认请求是不带cookie,发起请求前需要配置请求中的withCredentials = true,使请求带上cookie.

    '/wx1': {
        target: 'https://wx.qq.com',
        secure: false,
        changeOrigin: true,
        headers: {
          Referer: 'https://wx.qq.com'
        },
        pathRewrite: {
          '^/wx1': '/'
        },
        onProxyRes: (proxyRes, req, res) => {
          let cookies = proxyRes.headers['set-cookie']
          let cookieRegex = /Secure/i
          //修改cookie secure
          if (cookies) {
            let newCookie = cookies.map((cookie) => {
              if (cookieRegex.test(cookie)) {
                return cookie.replace(cookieRegex, '')
              }
              return cookie
            })
            //修改cookie path
            delete proxyRes.headers['set-cookie']
            proxyRes.headers['set-cookie'] = newCookie
          }
        },
        // 重写cookie domian
        cookieDomainRewrite: {
          '*': 'localhost'
        }
      }

    如果需要在生产环境中需要跨域,可以参考网上解答
    如nginx环境下可以修改nginx.conf配置

    proxy_cookie_domain 'wx.qq.com' $host;

    问题(2)中,我们需要注意web微信接口并非一成不变,不同账号登录会跳到不一样的接口,已知的存在两种可能性
    如获取微信登录用户信息/cgi-bin/mmwebwx-bin/webwxnewloginpage接口,就存在两种前缀
    https://wx.qq.com/cgi-bin/mmwebwx-bin/webwxnewloginpage
    https://wx2.qq.com/cgi-bin/mmwebwx-bin/webwxnewloginpage
    因此我们必须在登录前从login登录接口(下面会详细解析)获取该微信重定向的地址

    前期工作准备


    获取UUID

    这里写图片描述

    method: GET
    path: /login/jslogin
    参数:

    appid: 'wx782c26e4c19acffb', // appid (固定值)
    redirect_uri: 'https://wx.qq.com/cgi-bin/mmwebwx-bin/webwxnewloginpage', // 重定向路径
    fun: 'new', // (固定值)
    lang: 'zh_CN', // 语言版本 (固定值)
    _: new Date().getTime() // 时间戳

    响应返回值:window.QRLogin.code = 200; window.QRLogin.uuid = “AZc-ETs6NA==”;

    返回值为字符串,可以通过正则式得到code和uuid

    res = {
        code: 200,
        uuid: 'AZc-ETs6NA=='
    }

    获取二维码

    https://login.weixin.qq.com/qrcode/{uuid}

    https://login.weixin.qq.com/qrcode/AZc-ETs6NA==

    等待登录扫码

    method: GET
    path: /cgi-bin/mmwebwx-bin/login
    参数:

    loginicon: true,
    uuid: uuid,
    tip: 0,
    r: ~new Date().getTime(),
    _: new Date().getTime()

    等待登录扫码是一个长轮询接口(25S左右),用户扫码到确定存在不同响应状态
    (1)长时间未扫码,登录超时

    window.code=408;

    (2)扫码未确定,获取用户头像

    window.code=201;window.userAvatar='data:img/jpg;base64';

    (3)扫码未确定,超出限制时间,二维码无效需重新扫码

    window.code=400;

    (4)扫码并确定

    window.code=200;
    window.redirect_uri="https://wx.qq.com/cgi-bin/mmwebwx-bin/webwxnewloginpage?ticket=Acej3HhQ4Mcb8CrNtZkOooln@qrticket_0&uuid=Ia-L18JF6w==&lang=zh_CN&scan=1535295440";

    获取微信登录令牌(登录中最重要的一步)

    method: GET
    path: /cgi-bin/mmwebwx-bin/webwxnewloginpage
    上一步扫码成功后redirect_uri后面加上&fun=new&version=v2
    例如:https://wx.qq.com/cgi-bin/mmwebwx-bin/webwxnewloginpage?ticket=Acej3HhQ4Mcb8CrNtZkOooln@qrticket_0&uuid=Ia-L18JF6w==&lang=zh_CN&scan=1535295440&fun=new&version=v2

    响应:

    <error>
    <ret>0</ret>
    <message></message>
    <skey>@crypt_ca4ca197_6abe45393fc8632b547d6231c537a5f5</skey>
    <wxsid>gYCDNcRRyujtvMEF</wxsid>
    <wxuin>\*\*\*\*\*\*\*\*</wxuin>
    <pass_ticket>6huRNbBOP9XzXc4bZiD8H%2BJIRH6spE11Vn86Fgpn6VNfW5%2BJfDcxlQ%2B%2Bt5TSb7Cb</pass_ticket>
    <isgrayscale>1</isgrayscale>
    </error>

    返回值未XML格式,需要把skey, wxsid, wxuin, pass_ticket参数解析出来并保存,后面的请求参数都需要用到

    同时我们也需要保存Response cookie,也就是前面提到的第一个问题

    这里写图片描述


    展开全文
  • 微信公众平台开发微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等...
  • 一个做WEB开发的童鞋问我,微信小程序和WEB开发有什么不同? 一下子懵圈了,不知道怎么解释给他听好。 微信小程序坐拥微信大生态,也有自己的标签语言,那就是WXML。 WXML(WeiXin Markup Language)是框架设计的...

    一个做WEB开发的童鞋问我,微信小程序和WEB开发有什么不同?

    一下子懵圈了,不知道怎么解释给他听好。

    微信小程序坐拥微信大生态,也有自己的标签语言,那就是WXML。

    WXML(WeiXin Markup Language)是框架设计的一套标签语言,对应WEB开发用的HTML标签语言,结合基础组件、事件系统,可以构建出页面的结构。

    用以下一些简单的例子来看看 WXML 具有什么能力:

    模板

    <!--wxml-->
    <template name="staffName">
      <view>
        FirstName: {{firstName}}, LastName: {{lastName}}
      </view>
    </template>
    
    <template is="staffName" data="{{...staffA}}"></template>
    <template is="staffName" data="{{...staffB}}"></template>
    <template is="staffName" data="{{...staffC}}"></template>
    
    // page.js
    Page({
      data: {
        staffA: {firstName: 'Hulk', lastName: 'Hu'},
        staffB: {firstName: 'Shang', lastName: 'You'},
        staffC: {firstName: 'Gideon', lastName: 'Lin'}
      }
    })

    小程序火了后,身边很多的做WEB开发的小伙伴也在转型做小程序开发,不妨先熟悉下WXML吧。

    展开全文
  • 微信公众平台开发之公众号JSSDK开发是子恒老师《微信公众平台开发》视频教程的第9部。详细讲解了用php开发微信公众号,对微信公众平台中的JSSDK开发。内容包含用JSSDK获取网络状态,地理位置,分享到朋友圈,QQ,...
  • 微信公众号开发
  • 做任何程序开发要首先找到其官方文档,我们先来看看其有哪些官方文档。 微信小程序开发文档链接为:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html,如下图: 这里就是做微信小程序开发的全部官方文档。...
  • 小程序web-view使用方法是子恒老师《子恒说小程序开发》视频...详细讲解了小程序web-view组件的使用,内容包含web view打开网页,网页小程序之间的跳转,在web view中实现微信支付等等。欢迎反馈,微信号:QQ68183131
  • 笔者在CSDN博客频道推出微信公众平台开发教程之后,接触了许多公众平台开发爱好者,也帮助他们解决了许多实际的问题,当然这其中有很多问题都是重复的,因此,笔者将这些问题及解答整理出来,以帮助更多初学者少走...
  • 微信公众号主要有以下几个步骤 微信公众号的通讯机制 微信公众号简介 1.注册微信公众号 2.注册测试公众号 3.搭建微信本地调试环境 1)下载客户端natapp: 2)安装natapp: 4.微信公众号接入(校验签名) 第1步中...
1 2 3 4 5 ... 20
收藏数 87,680
精华内容 35,072