2014-11-02 11:02:07 fuyifang 阅读数 175920
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

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

在微信开发时候在做消息接口交互的时候需要使用带微信加密ID(OpenId),下面讲讲述2中类型方式获取微信OpenID,接收事件推送方式和网页授权获取用户基本信息方式获取。

1、通过接收被动消息方式获取OpenId(接收事件推送方式),以下事件中都可以获取到OpenID

关注/取消关注事件

用户在关注与取消关注公众号时,微信会把这个事件推送到开发者填写的URL。方便开发者给用户下发欢迎消息或者做帐号的解绑。

微信服务器在五秒内收不到响应会断掉连接,并且重新发起请求,总共重试三次

关于重试的消息排重,推荐使用FromUserName + CreateTime 排重。

假如服务器无法保证在五秒内处理并回复,可以直接回复空串,微信服务器不会对此作任何处理,并且不会发起重试。

推送XML数据包示例:

<xml>
<ToUserName><![CDATA[toUser]]></ToUserName>
<FromUserName><![CDATA[FromUser]]></FromUserName>
<CreateTime>123456789</CreateTime>
<MsgType><![CDATA[event]]></MsgType>
<Event><![CDATA[subscribe]]></Event>
</xml>

参数说明:

参数描述
ToUserName开发者微信号
FromUserName发送方帐号(一个OpenID)
CreateTime消息创建时间 (整型)
MsgType消息类型,event
Event事件类型,subscribe(订阅)、unsubscribe(取消订阅)

使用网页调试工具调试该接口

扫描带参数二维码事件

用户扫描带场景值二维码时,可能推送以下两种事件:

  1. 如果用户还未关注公众号,则用户可以关注公众号,关注后微信会将带场景值关注事件推送给开发者。
  2. 如果用户已经关注公众号,则微信会将带场景值扫描事件推送给开发者。

1. 用户未关注时,进行关注后的事件推送

推送XML数据包示例:

<xml><ToUserName><![CDATA[toUser]]></ToUserName>
<FromUserName><![CDATA[FromUser]]></FromUserName>
<CreateTime>123456789</CreateTime>
<MsgType><![CDATA[event]]></MsgType>
<Event><![CDATA[subscribe]]></Event>
<EventKey><![CDATA[qrscene_123123]]></EventKey>
<Ticket><![CDATA[TICKET]]></Ticket>
</xml>

参数说明:

参数描述
ToUserName开发者微信号
FromUserName发送方帐号(一个OpenID)
CreateTime消息创建时间 (整型)
MsgType消息类型,event
Event事件类型,subscribe
EventKey事件KEY值,qrscene_为前缀,后面为二维码的参数值
Ticket二维码的ticket,可用来换取二维码图片

2. 用户已关注时的事件推送

推送XML数据包示例:

<xml>
<ToUserName><![CDATA[toUser]]></ToUserName>
<FromUserName><![CDATA[FromUser]]></FromUserName>
<CreateTime>123456789</CreateTime>
<MsgType><![CDATA[event]]></MsgType>
<Event><![CDATA[SCAN]]></Event>
<EventKey><![CDATA[SCENE_VALUE]]></EventKey>
<Ticket><![CDATA[TICKET]]></Ticket>
</xml>

参数说明:

参数描述
ToUserName开发者微信号
FromUserName发送方帐号(一个OpenID)
CreateTime消息创建时间 (整型)
MsgType消息类型,event
Event事件类型,SCAN
EventKey事件KEY值,是一个32位无符号整数,即创建二维码时的二维码scene_id
Ticket二维码的ticket,可用来换取二维码图片

使用网页调试工具调试该接口

上报地理位置事件

用户同意上报地理位置后,每次进入公众号会话时,都会在进入时上报地理位置,或在进入会话后每5秒上报一次地理位置,公众号可以在公众平台网站中修改以上设置。上报地理位置时,微信会将上报地理位置事件推送到开发者填写的URL。

推送XML数据包示例:

<xml>
<ToUserName><![CDATA[toUser]]></ToUserName>
<FromUserName><![CDATA[fromUser]]></FromUserName>
<CreateTime>123456789</CreateTime>
<MsgType><![CDATA[event]]></MsgType>
<Event><![CDATA[LOCATION]]></Event>
<Latitude>23.137466</Latitude>
<Longitude>113.352425</Longitude>
<Precision>119.385040</Precision>
</xml>

参数说明:

参数描述
ToUserName开发者微信号
FromUserName发送方帐号(一个OpenID)
CreateTime消息创建时间 (整型)
MsgType消息类型,event
Event事件类型,LOCATION
Latitude地理位置纬度
Longitude地理位置经度
Precision地理位置精度

使用网页调试工具调试该接口

自定义菜单事件

用户点击自定义菜单后,微信会把点击事件推送给开发者,请注意,点击菜单弹出子菜单,不会产生上报。

点击菜单拉取消息时的事件推送

推送XML数据包示例:

<xml>
<ToUserName><![CDATA[toUser]]></ToUserName>
<FromUserName><![CDATA[FromUser]]></FromUserName>
<CreateTime>123456789</CreateTime>
<MsgType><![CDATA[event]]></MsgType>
<Event><![CDATA[CLICK]]></Event>
<EventKey><![CDATA[EVENTKEY]]></EventKey>
</xml>

参数说明:

参数描述
ToUserName开发者微信号
FromUserName发送方帐号(一个OpenID)
CreateTime消息创建时间 (整型)
MsgType消息类型,event
Event事件类型,CLICK
EventKey事件KEY值,与自定义菜单接口中KEY值对应


点击菜单跳转链接时的事件推送

推送XML数据包示例:

<xml>
<ToUserName><![CDATA[toUser]]></ToUserName>
<FromUserName><![CDATA[FromUser]]></FromUserName>
<CreateTime>123456789</CreateTime>
<MsgType><![CDATA[event]]></MsgType>
<Event><![CDATA[VIEW]]></Event>
<EventKey><![CDATA[www.qq.com]]></EventKey>
</xml>

参数说明:

参数描述
ToUserName开发者微信号
FromUserName发送方帐号(一个OpenID)
CreateTime消息创建时间 (整型)
MsgType消息类型,event
Event事件类型,VIEW
EventKey事件KEY值,设置的跳转URL

使用网页调试工具调试该接口

 以上信息摘自微信公众平台接收事件推送章节。点击查看原始帮助文档-接收事件推送


2、通过第三方网页授权方式获取OpenID,采用第三方网页授权(OAuth2.0授权登录)

如果用户在微信中(Web微信除外)访问公众号的第三方网页,公众号开发者可以通过此接口获取当前用户基本信息(包括昵称、性别、城市、国家)。利用用户信息,可以实现体验优化、用户来源统计、帐号绑定、用户身份鉴权等功能。请注意,“获取用户基本信息接口是在用户和公众号产生消息交互时,才能根据用户OpenID获取用户基本信息,而网页授权的方式获取用户基本信息,则无需消息交互,只是用户进入到公众号的网页,就可弹出请求用户授权的界面,用户授权后,就可获得其基本信息(此过程甚至不需要用户已经关注公众号。)”

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

在微信公众号请求用户网页授权之前,开发者需要先到公众平台网站的我的服务页中配置授权回调域名。请注意,这里填写的域名不要加http://

关于配置授权回调域名的说明:

授权回调域名配置规范为全域名,比如需要网页授权的域名为:www.qq.com,配置以后此域名下面的页面http://www.qq.com/music.htmlhttp://www.qq.com/login.html 都可以进行OAuth2.0鉴权。但http://pay.qq.comhttp://music.qq.comhttp://qq.com  无法进行OAuth2.0鉴权。

具体而言,网页授权流程分为四步:

  1. 引导用户进入授权页面同意授权,获取code
  2. 通过code换取网页授权access_token(与基础支持中的access_token不同)
  3. 如果需要,开发者可以刷新网页授权access_token,避免过期
  4. 通过网页授权access_token和openid获取用户基本信息

目录

[隐藏]

第一步:用户同意授权,获取code

在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认带有scope参数中的snsapi_base和snsapi_userinfo),引导关注者打开如下页面:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
若提示“该链接无法访问”,请检查参数是否填写错误,是否拥有scope参数对应的授权作用域权限。
参考链接(请在微信客户端中打开此链接体验)
Scope为snsapi_base
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=http%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect
Scope为snsapi_userinfo
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

参数说明

参数是否必须说明
appid公众号的唯一标识
redirect_uri授权后重定向的回调链接地址,请使用urlencode对链接进行处理
response_type返回类型,请填写code
scope应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息
state重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值
#wechat_redirect无论直接打开还是做页面302重定向时候,必须带此参数

下图为scope等于snsapi_userinfo时的授权页面:

网页授权

用户同意授权后

如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE。若用户禁止授权,则重定向后不会带上code参数,仅会带上state参数redirect_uri?state=STATE

code说明 :
code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期。

第二步:通过code换取网页授权access_token

首先请注意,这里通过code换取的网页授权access_token,与基础支持中的access_token不同。公众号可通过下述接口来获取网页授权access_token。如果网页授权的作用域为snsapi_base,则本步骤中获取到网页授权access_token的同时,也获取到了openid,snsapi_base式的网页授权流程即到此为止。

请求方法

获取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

返回说明

正确时返回的JSON数据包如下:

{
   "access_token":"ACCESS_TOKEN",
   "expires_in":7200,
   "refresh_token":"REFRESH_TOKEN",
   "openid":"OPENID",
   "scope":"SCOPE"
}
参数描述
access_token网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同
expires_inaccess_token接口调用凭证超时时间,单位(秒)
refresh_token用户刷新access_token
openid用户唯一标识,请注意,在未关注公众号时,用户访问公众号的网页,也会产生一个用户和公众号唯一的OpenID
scope用户授权的作用域,使用逗号(,)分隔


错误时微信会返回JSON数据包如下(示例为Code无效错误):

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

全局返回码说明

第三步:刷新access_token(如果需要)

由于access_token拥有较短的有效期,当access_token超时后,可以使用refresh_token进行刷新,refresh_token拥有较长的有效期(7天、30天、60天、90天),当refresh_token失效的后,需要用户重新授权。

请求方法

获取第二步的refresh_token后,请求以下链接获取access_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参数

返回说明

正确时返回的JSON数据包如下:

{
   "access_token":"ACCESS_TOKEN",
   "expires_in":7200,
   "refresh_token":"REFRESH_TOKEN",
   "openid":"OPENID",
   "scope":"SCOPE"
}
参数描述
access_token网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同
expires_inaccess_token接口调用凭证超时时间,单位(秒)
refresh_token用户刷新access_token
openid用户唯一标识
scope用户授权的作用域,使用逗号(,)分隔


错误时微信会返回JSON数据包如下(示例为Code无效错误):

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

全局返回码说明

第四步:拉取用户信息(需scope为 snsapi_userinfo)

如果网页授权作用域为snsapi_userinfo,则此时开发者可以通过access_token和openid拉取用户信息了。

请求方法

http:GET(请使用https协议)
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

参数说明

参数描述
access_token网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同
openid用户的唯一标识
lang返回国家地区语言版本,zh_CN 简体,zh_TW 繁体,en 英语

返回说明

正确时返回的JSON数据包如下:

{
   "openid":" OPENID",
   " nickname": NICKNAME,
   "sex":"1",
   "province":"PROVINCE"
   "city":"CITY",
   "country":"COUNTRY",
    "headimgurl":    "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46", 
	"privilege":[
	"PRIVILEGE1"
	"PRIVILEGE2"
    ]
}
参数描述
openid用户的唯一标识
nickname用户昵称
sex用户的性别,值为1时是男性,值为2时是女性,值为0时是未知
province用户个人资料填写的省份
city普通用户个人资料填写的城市
country国家,如中国为CN
headimgurl用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空
privilege用户特权信息,json 数组,如微信沃卡用户为(chinaunicom)


错误时微信会返回JSON数据包如下(示例为openid无效):

{"errcode":40003,"errmsg":" invalid openid "}

全局返回码说明

附:检验授权凭证(access_token)是否有效

请求方法

http:GET(请使用https协议)
https://api.weixin.qq.com/sns/auth?access_token=ACCESS_TOKEN&openid=OPENID

参数说明

参数描述
access_token网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同
openid用户的唯一标识

返回说明

正确的Json返回结果:

{ "errcode":0,"errmsg":"ok"}

错误时的Json返回示例:

{ "errcode":40003,"errmsg":"invalid openid"}

 以上信息摘自微信公众平台网页授权获取用户基本信息章节。点击查看原始帮助文档-网页授权获取用户基本信息


更多关注付义方技术博客:http://blog.csdn.net/fuyifang 本人新浪微博:http://weibo.com/i/1741159542


2019-09-30 09:28:25 qq_35610214 阅读数 1090
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

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

因为迎近国庆,腾讯新闻出了款微信用户头像框在线生成的h5网页,当天朋友圈被这条消息刷屏了

 

然后我晚上就花2个多小时时间开发了一款微信小程序“小小小头像”,这款小程序可以获取用户头像选择自己喜欢的头像框进行绘制。也可以选择本地上传自己想要的图片。

 

重点是这款小程序是纯前端开发的(我这里没有用到云开发),毕竟2个小时时间,只是做着玩一下,万一火了呢,现在我把项目开源,码云地址:https://gitee.com/citn/xiaoxiaoxiaotouxiang

 

你们可以关注一下我的个人微信公众号 “程序员小鸿”,查看最新动态!

2015-04-28 19:28:39 fansongy 阅读数 9687
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

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


文章作者:松阳

本文出自 阿修罗道,禁止用于商业用途,转载请注明出处。  

原文链接:http://blog.csdn.net/fansongy/article/details/45340951







网页授权

微信开发时,我们总是想要尽可能多的活动用户的信息。但微信官方和用户本身,又不想暴露这些信息。搞来搞去,就出现了很多奇形怪状的规则和交互方式。微信网页授权就是其中之一,它可以为我们提供获取用户OpenID途径。做到悄悄的进村,开枪的不要。

流程说明

这个流程其实也不复杂。首先用户访问 https://open.weixin.qq.com/connect/oauth2/authorize 这个连接,链接后面带着appid,我们要跳转的链接名称,以及一个自定义变量。当用户访问时,微信服务器会跳转回我们的链接,并将用户的openID传回来。官方说明如下:

在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认拥有scope参数中的snsapi_base和snsapi_userinfo),引导关注者打开如下页面:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

若提示“该链接无法访问”,请检查参数是否填写错误,是否拥有scope参数对应的授权作用域权限。官方链接在这里

当然随随便便给你用户的openID是有条件的:保护费交一下。实名认证少不了滴。

接口设计

有了这个我们就可以使用很多授权页面了。如果你只要用户的openID,是不会出现那个恶心人的绿色界面的。如果用户未关注你的服务号,并且你还想要昵称和头像,就会出现那个“我是贼”的绿色页面。上面写明了要昵称和头像的授权,虽然我也知道没啥后招,但凡是出现这个页面的,我都毫不犹豫的关掉了

为了避免设计很多乱七八糟的Oauth接口,我建议只使用一个接口,然后通过state的值来做逻辑判断的标准,更改程序返回的页面。

实现

首先还是那句话,实名认证,没这个,接口啥的免谈。

然后编写一个统一的Oauth接口。

@RequestMapping(value="/authIntf")
public void authLogin(HttpServletRequest request,HttpServletResponse response,HttpSession session) throws IOException{
    String redirectURL="http://blog.csnd.net/fansongy";
    String code = request.getParameter("code");
    if(code == null ||code.length() == 0){
        logger.error("can't get param code from auth request!");
    }
    String actionType =request.getParameter("state");
    if(actionType == null || actionType.length() == 0){
        logger.error("can't get param code from auth request!");
    }
    String userOpenId = wxAuthService.getUserOpenID(code);
    if(userOpenId != null && userOpenId.length()>0) {
        redirectURL = loginAndJumpBack(userOpenId, actionType);
    }else {
        logger.info("Can't find openId in authLogin");
    }
    response.sendRedirect(redirectURL);
}

public String loginAndJumpBack(String fromUserName, String actionType) {
    //your logic
    return "http://www.baidu.com";
}

部署

在微信服务号的后台设置合法的域名,具体做法可以参考官方文档:

在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的开发者中心页配置授权回调域名。请注意,这里填写的是域名(是一个字符串),而不是URL,因此请勿加http://等协议头;

最终部署时,建议先更新服务,然后在微信中通过链接的方式测试,测试完成后,在添加微信入口,比如菜单点击事件。

如果你觉得这篇文章对你有帮助,可以顺手点个,不但不会喜当爹,还能让更多人能看到它... 

2018-08-17 00:58:11 t554984986 阅读数 7950
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

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

微信小程序前台开发,实现登录功能,获取微信头像和微信名称,实现底部导航栏,顶部导航栏(通过导航栏分类显示内容)。

1、初次开发微信小程序需要去官网下载微信小程序开发工具。

 下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2、通过官方的教程注册小程序账号。

教程链接:https://developers.weixin.qq.com/miniprogram/dev/

3、打开微信开发者工具新建项目。

选择项目路径,填写微信小程序管理平台上你自己的appid,填写项目名称。

可以勾选快速建立普通模板,创建基本架构。

4、app命名的文件是整个小程序的全局配置和打开小程序的初始加载内容。

   4.1修改app.json

{
  "pages": [
    "pages/gerenyemian/grym",
      "pages/gerenyemian/grzym/lishi/lishi",
      "pages/gerenyemian/grzym/sqfw/sqfw",
      "pages/gerenyemian/grzym/gzgs/gzgs",
      "pages/gerenyemian/grzym/gzzj/gzzj",
      "pages/gerenyemian/grzym/zjrz/zjrz",
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "个人中心",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "backgroundColor": "#fff",
    "color": "#A0A0A0",
    "selectedColor": "#FF3300",
    "list": [
      {
        "pagePath": "pages/shouye/index",
        "iconPath":"image/sy.png",
        "selectedIconPath": "image/sy_s.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/gongnengfuwu/index",
        "iconPath": "image/gn.png",
        "selectedIconPath": "image/gn_s.png",
        "text": "功能"
      },
      {
        "pagePath": "pages/zixunyemian/zxym",
        "iconPath": "image/zx.png",
        "selectedIconPath": "image/zx_s.png",
        "text": "咨询"
      },
      {
        "pagePath": "pages/gongsijieshao/gsjs",
        "iconPath": "image/gs.png",
        "selectedIconPath": "image/gs_s.png",
        "text": "公司"
      },
      {
        "pagePath": "pages/gerenyemian/grym",
        "iconPath": "image/gr.png",
        "selectedIconPath": "image/gr_s.png",
        "text": "个人"
      }
    ]
  }
}

ps: tabBar为小程序自带的底部导航栏

4.2在pages目录下新建gerenremian文件新建page名称为grym。

4.2.1 通过grym,js实现交互实现登录功能(js中的各个API都可以通过微信小程序API看到如何使用 链接:https://developers.weixin.qq.com/miniprogram/dev/api/)

// pages/gerenyemian/grym.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    wx.setNavigationBarTitle({
      title: '个人中心',
    })
    wx.getSetting({
      success(res){
        if (!res.authSetting['scope.userInfo']){
          wx.authorize({
            scope: "scope.userInfo",
            success:(
              wx.getUserInfo({
                success:function(res){
                  console.log(res.userInfo)
                }
                })
              )
          }
          )
        }
      }
    })
  }
})

4.2.2编写grym.wxml实现页面的显示

<!--pages/gerenyemian/grym.wxml-->
<view class="gr">
  <view class="xingxi">
      <open-data class="touxiang" type="userAvatarUrl"></open-data>
    <open-data type="userNickName"></open-data>
  </view>
</view>
<view class="xuanxiang">
  
  <navigator class="kuang" url="../gerenyemian/grzym/lishi/lishi">
    <image class ="gr_image" mode="aspectFit" src="../gerenyemian/image/question-circle-fill.png"></image>
    <view class="text">历史咨询</view>
    <view class="right-arrow"></view>
  </navigator>
  <navigator class="kuang" url="../gerenyemian/grzym/sqfw/sqfw">
    <image class ="gr_image" mode="aspectFit" src="../gerenyemian/image/earth.png"></image>
   <view class="text">申请服务</view>
   <view class="right-arrow"></view>
  </navigator>
  <navigator class="kuang" url="../gerenyemian/grzym/gzgs/gzgs">
    <image class ="gr_image" mode="aspectFit" src="../gerenyemian/image/shop-fill.png"></image>
   <view class="text">关注公司</view>
   <view class="right-arrow"></view>
  </navigator>
  <navigator class="kuang" url="../gerenyemian/grzym/gzzj/gzzj">
   <image class ="gr_image" mode="aspectFit" src="../gerenyemian/image/team.png"></image>
   <view class="text">关注专家</view>
   <view class="right-arrow"></view>
  </navigator>
  <navigator id="kuang1" url="../gerenyemian/grzym/zjrz/zjrz">
   <image class ="gr_image" mode="aspectFit" src="../gerenyemian/image/adduser.png"></image>
   <view class="text">专家入驻</view>
   <view class="right-arrow"></view>
  </navigator>
</view>


<view class="msg">
  <text class='msg_text'>客服电话:100000000</text>
  <text class='msg_text'>如果有任何问题欢迎拨打我们的客服电话</text>
</view>

ps:可以通过在其子目录下创建多个页面通过navigator进行页面的跳转

4.2.3通过grym.wxss来对样式进行操控

/* pages/gerenyemian/grym.wxss */
.xingxi{
  display: flex;
  /* flex布局为列 */
  flex-direction: column;
  /*居中 */
  align-items: center;
}
.touxiang{
  /* 溢出内容被裁剪 */
  overflow:hidden;
  /* 此元素将显示为块级元素 */
  display: block;
  width: 160rpx;
  height: 160rpx;
  /* 边距 */
  margin: 20rpx;
  margin-top: 50rpx;
  /* 边圆角 */
  border-radius: 50%;
  /* 边框 */
  border: 2px solid #fff;
  /* 阴影 */
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  
}
.gr{
  display: flex;
  /* flex布局为列 */
  flex-direction: column;
  /* 距离顶部 */
  padding-top: 5%;
}

.xuanxiang{
  margin-top: 8%;
  margin-left: 9%;
  margin-right: 9%;
  align-items: center;
  border-radius: 4%;
  border: 1px;
  border-style: solid solid solid solid;
  border-color: gainsboro;
}

.kuang{
  
  display: flex;
  flex-direction: row;
  padding-top:3%;
  padding-left: 6%;
  padding-bottom: 1%;
  border: 1px;
  border-style: none none solid none;
  border-color: gainsboro;
}

#kuang1{
  display: flex;
  flex-direction: row;
  padding-top:3%;
  padding-left: 6%;
  padding-bottom: 1%;
  border: 1px;
  border-style: none none none none;
  border-color: gainsboro;
}

.text{
  width: auto;
  padding-top: 1%;
  padding-left: 3%;
  font-size: 15px;
 
}

.gr_image{
  height: 60rpx;
  width: 60rpx;
}

/*右箭头*/
.right-arrow {
    padding-left: 52%;
    padding-top: 3%;
    display :inline-block;
    position: relative;
    width: 36rpx;
    height: 36rpx;
    margin-right: 20rpx;
}

.right-arrow::after {
    display: inline-block;
    content: " ";
    height: 18rpx;
    width: 18rpx;
    border-width: 5rpx 5rpx 0 0;
    border-color: #c7c7cc;
    border-style: solid;
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 35%;
    right: 6rpx;
    margin-top: -9rpx;
}
.msg{
  display: flex;
  /* flex布局为列 */
  flex-direction: column;
  /*居中 */
  align-items: center;
  margin-top: 9%;
}
.msg_text{
  font-size: 30rpx;
  color: #A8A8A8;
}

最终成品样式:

5、实现顶部导航栏。

顶部导航栏是通过 易雪寒的分享的代码实现的,原博客链接https://blog.csdn.net/u013521220/article/details/78923136

5.1zyym.js代码

// pages/zixunyemian/zxym.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    winWidth: 0,
    winHeight: 0,
    currentTab:0,
    currentSelect: 1,
    items: [{
      'image': "./image/a22.jpg",
      'name': '张三',
      'company': '专家',
      'title': 'XXXXXXXXXXXXXXXXXXXXXXXX',
      'type': '3'

    },
    {
      'image': "",
      'name': '赵四',
      'company': '公司',
      'title': 'YYYYYYYYYYYYYYYYYYYYYYY',
      'type': '4'

    },
    {
      'image': "",
      'name': '王五',
      'company': '公司',
      'title': 'ZZZZZZZZZZZZZZZZZZZZZZZZ',
      'type': '2'
    }

    ]
  },
  onLoad: function () {
    var that = this;

    /** 
     * 获取系统信息 
     */
    wx.getSystemInfo({

      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
    }),
    wx.setNavigationBarTitle({
      title: '咨询服务',
    })

  },

  /** 
     * 滑动切换tab 
     */
  bindChange: function (e) {

    var that = this;
    that.setData({ currentTab: e.detail.current });

  },
  /** 
   * 点击tab切换 
   */
  swichNav: function (e) {

    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  }
})

5.2zyym.wxml代码

<!--pages/zixunyemian/zxym.wxml-->

 <!-- <view class="tabs-top">
    <view  wx:for-items="{{tabs}}" class="tab-item" bindtap='onTab' data-id="{{item.id}}">
      {{item.title}}
    </view>
  </view>
-->
<view class="swiper-tab">  
    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">全部</view>  
    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">专家咨询</view>  
    <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">公司咨询</view>  
</view>  

<swiper current="{{currentTab}}" class="swiper-box" duration="300"  style="height:{{winHeight}}px" bindchange="bindChange"> 
    <!-- 我是哈哈 -->  
  <swiper-item>  
    <view wx:for-items="{{items}}" class='page_card'>
      <view class='page-xx' >
        <image class="full-image"  src="{{item.image}}"></image>
          <view class='page-xx-text' style='width:70%'>
            <view class='xx-text-name'>
              <text class ="text-name">{{item.name}}</text>
            </view>
            <view>
              <text class ="text-company">{{item.company}}</text>
            </view>
          </view>
      </view>
      <view class="jian">
        <text class ="jian-text">{{item.title}}</text>
      </view>

      <view class="btn">
       <view style='margin:7px;display:flex;flex-direction:row;'>
          <button class="btn-wx"><image src='./image/call_3.png' style="width:19px;height:19px;"> </image> 微信咨询</button>
          <button class="btn-call"><image src='./image/call_4.png' style="width:19px;height:19px;"> </image> 电话咨询</button>
        </view>
      </view>
    </view>  
  </swiper-item>  
    <!-- 专家咨询 -->  
  <swiper-item>  
    <view wx:for-items="{{items}}" class='page_card'>
      <block wx:if="{{item.company=='专家'}}">
        <view class='page-xx' >
          <image class="full-image"  src="{{item.image}}"></image>
            <view class='page-xx-text' style='width:70%'>
              <view class='xx-text-name'>
               <text class ="text-name">{{item.name}}</text>
              </view>
             <view>
                <text class ="text-company">{{item.company}}</text>
             </view>
            </view>
        </view>
        <view class="jian">
          <text class ="jian-text">{{item.title}}</text>
        </view>

        <view class="btn">
          <view style='margin:7px;display:flex;flex-direction:row;'>
           <button class="btn-wx"><image src='./image/call_3.png' style="width:19px;height:19px;"> </image> 微信咨询</button>
            <button class="btn-call"><image src='./image/call_4.png' style="width:19px;height:19px;"> </image> 电话咨询</button>
         </view>
        </view>
      </block>
    </view>  
  </swiper-item>  
    <!-- 公司咨询 -->  
    <swiper-item>  
      <view wx:for-items="{{items}}" class='page_card'>
      <block wx:if="{{item.company=='公司'}}">
        <view class='page-xx' >
          <image class="full-image"  src="{{item.image}}"></image>
            <view class='page-xx-text' style='width:70%'>
              <view class='xx-text-name'>
               <text class ="text-name">{{item.name}}</text>
              </view>
             <view>
                <text class ="text-company">{{item.company}}</text>
             </view>
            </view>
        </view>
        <view class="jian">
          <text class ="jian-text">{{item.title}}</text>
        </view>

        <view class="btn">
          <view style='margin:7px;display:flex;flex-direction:row;'>
           <button class="btn-wx"><image src='./image/call_3.png' style="width:19px;height:19px;"> </image> 微信咨询</button>
            <button class="btn-call"><image src='./image/call_4.png' style="width:19px;height:19px;"> </image> 电话咨询</button>
         </view>
        </view>
      </block>
    </view>  
    </swiper-item>  
</swiper>  
 <!-- <view class="page-bd">
    <view  wx:for-items="{{items}}" class='page_card'>
       <view wx:if="{{item.type==currentSelect||currentSelect==1}}" class="list card">
         <view class='page-xx' >
             <image class="full-image"  src="{{item.image}}"></image>
             <view class='page-xx-text' style='width:70%'>
                <view class='xx-text-name'>
                   <text class ="text-name">{{item.name}}</text>
                </view>
                <view>
                  <text class ="text-company">{{item.company}}</text>
                </view>
              </view>
          </view>
      <view class="jian">
          <text class ="jian-text">{{item.title}}</text>
      </view>

      <view class="btn">
        <view style='margin:7px;display:flex;flex-direction:row;'>
            <button class="btn-wx"><image src='./image/call_3.png' style="width:19px;height:19px;"> </image> 微信咨询</button>
            <button class="btn-call"><image src='./image/call_4.png' style="width:19px;height:19px;"> </image> 电话咨询</button>
        </view>
      </view>
    </view>
  </view>
</view>--> 

5.3zxym.wxss

/* pages/zixunyemian/zxym.wxss */
.swiper-tab{  
    width: 100%;  
    border-bottom: 2rpx solid #777777;  
    text-align: center;  
    line-height: 80rpx;}  
.swiper-tab-list{  font-size: 30rpx;  
    display: inline-block;  
    width: 33.33%;  
    color: #777777;  
}  
.on{ color: #da7c0c;  
    border-bottom: 5rpx solid #da7c0c;}  
  
.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }  
.swiper-box view{  
  
    text-align: center;  
}  

.tab-item{
  display:inline-block;
  margin-left: 4px;
  margin-right: 4px;
  font-size: 15px;
  text-align: center;
  width: 22%;
}

.full-image{
  width:80px;
  height:80px;
  margin:13px;
  border-radius: 50px;
}
.page-xx{
  display:flex;
  flex-direction:row;
}
.xx-text-name{
  text-align: center;
  margin: 10px;
  width: 65%;
}
.text-name{
  font-size:30px;
  color:rgb(51, 20, 20);
}
.page_card{
  background:rgba(160, 160, 160, 0.295);
  margin: 8px;
  border-radius: 7px;
}

.jian-text
{
 font-size:16px;
 text-align: left;
}

.btn{
  display: flex;
 justify-content: center;
}
.btn-wx{
  display: flex;
  align-items: center;
  font-size:14px;
  background-color:#4a66c2;
}
.btn-call{
  display: flex;
  align-items: center;
  font-size:14px;
  background-color:#e67c61;
}

最终效果:

点击全部

点击专家:

点击公司:

 

2018-06-28 14:25:48 webstore 阅读数 3902
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

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

微信小程序开发教程文档

微信小程序是什么微信小程序如何开发微信小程序开发教程有哪些本教程将从微信小程序本身,结合微信官方-微信小程序开发工具,带你一步步创建一个微信小程序,并在手机操作预览该小程序实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志下载源码

步骤1. 获取微信小程序的 AppID

登录 https://mp.weixin.qq.com ,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID 。

微信小程序设置

注意:如果我们不是用注册时绑定的管理员微信号,在手机上体验该小程序,那么我们还需要操作“绑定开发者”。即在“用户身份”-“开发者”模块,绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。


步骤2. 创建项目

我们需要通过开发者工具,来完成小程序创建和代码编辑。

开发者工具安装完成后,打开并使用微信扫码登录。选择创建“项目”,填入上文获取到的 AppID ,设置一个本地项目的名称(非小程序名称),比如“我的第一个项目”,并选择一个本地的文件夹作为代码存储的目录,点击“新建项目”就可以了。

为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 quick start 项目。选择“是”,开发者工具会帮助我们在开发目录里生成一个简单的 demo。

小程序组件

项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在“编辑”里可以查看和编辑我们的代码,在“调试”里可以测试代码并模拟小程序在微信客户端效果,在“项目”里可以发送到手机里预览实际效果。


步骤3. 编写代码

创建小程序实例

点击微信小程序开发者工具左侧导航的“编辑”,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。在微信小程序的代码文件中,app.js、app.json、app.wxss 这三个文件是必不可少的,一般默认生成。其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。微信小程序会读取这些文件,并生成小程序实例

下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序。

app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。想了解更多可用 API,可参考 API 文档

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this;
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo;
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      });
    }
  },
  globalData:{
    userInfo:null
  }
})

app.json 是对整个微信小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考配置详解

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

app.wxss 是整个微信小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

创建页面

在这个教程里,我们的微信小程序有两个页面,index 页面和 logs 页面,即欢迎页和微信小程序启动日志的展示页,他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。

index.wxml 是页面的结构文件:

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

本例中使用了<view/><image/><text/>来搭建页面结构,绑定数据和交互处理函数。

index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

index.wxss 是页面的样式表:

/**index.wxss**/
.userinfo {
  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;
}

微信小程序页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

index.json 是页面的配置文件:

微信小程序页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。

logs 的页面结构

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

logs 页面使用 <block/> 控制标签来组织代码,在 <block/> 上使用 wx:for 绑定 logs 数据,并将 logs 数据循环展开节点。

//logs.js
var util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})

该微信小程序测试的运行结果如下:

小程序 运行结果


步骤4. 手机预览

微信小程序开发者工具左侧菜单栏选择"项目",点击"预览",扫码后即可在微信客户端中体验。

微信小程序预览

微信小程序入门

阅读数 59

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