微信公众平台网页开发实战--皇牌天下投注网2.从

来源:http://www.prospettivedarte.com 作者:计算机教程 人气:185 发布时间:2019-05-10
摘要:综合起来,业务逻辑如图4.5所示。 (1)微信端手机用户,可以使用微信的JSSDK。 修改一下JSSDK环境的配置文件,代码如下: 皇牌天下投注网,通过对需求的了解,可以将其分解为: (

综合起来,业务逻辑如图4.5所示。

(1)微信端手机用户,可以使用微信的JSSDK。

皇牌天下投注网 1

修改一下JSSDK环境的配置文件,代码如下:

皇牌天下投注网,通过对需求的了解,可以将其分解为:

(2)选取图片,使用JSSDK的“chooseImage”,由于分享图片时本地地址无法分享,因此还需要JSSDK的“uploadImage”。

图4.5  业务逻辑结构图

01 <!DOCTYPE html>
02 <html lang="en">
03 <head>
04  <meta charset="UTF-8">
05     <meta name="viewport" content="width=device-width, initial-scale=1.0, 
06 minimum-scale=1, maximum-scale=1.0, user-scalable=no">
07     <title>第4章 4.2节-实例:从手机相册中选照片然后分享</title>
08     <!--依赖文件:jQuery-->
09     <script src="./js/jquery-1.11.2.min.js"></script>
10     <!--依赖文件:微信的JSSDK源文件-->
11     <script src="http://www.prospettivedarte.com/uploads/allimg/190510/15315QN0-1.jpg"></script>
12     <!--依赖文件:coolie-->
13     <script src="./js/cookie.js"></script>
14     <!--JSSDK的环境-->
15     <script src="./js/wxJSSDK.js"></script>
16     <!--引入检测API的图像服务-->
17     <script src="imageSharing.js"></script>
18     <style>
19         input{
20             width: 100%;
21             padding: 0.2em;
22             background-color: #5eb95e;
23             font-size: 1.4em;
24             background-image: linear-gradient(to bottom, #62c462, #57a957);
25             background-repeat: repeat-x;
26             color: #ffffff;
27             text-align: center;
28             text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
29             border-radius: 0.3em;
30         }
31     </style>
32 </head>
33 <body>
34     <h1 style="font-size: 8em">:)</h1>
35     <b style="font-size: 2em">实例:从手机相册中选照片然后分享,支持选择1张图片!
36 </b><br /><br />
37     <p id="imageContainer" style="text-align: center;width: 100%"></p>
38     <p id="selectImg" style="color: #5eb95e;text-align: center">没有自定义分享图片</p>
39     <input type="button" value="请选择分享图片" id="chooseImage" /><br /><br />
40 </body>
41 </html>           
01 jsApiList: [ // 必填,需要使用的JS接口列表,所有JS接口列表见附录B
02     "chooseImage",
03     "previewImage",
04     "uploadImage",
05     "onMenuShareTimeline"
06 ]
07 //其他代码略

【代码解释】

 

  • 在index.html中,创建了一个分享自定义图片的按钮,如图4.7所示。
  • 点击分享按钮,调用JSSDK的选择图片API,让用户选中图片,如图4.8所示。

 

皇牌天下投注网 2

图4.7  自定义分享图片UI  

皇牌天下投注网 3

 图4.8  选择图片之后的UI

 

  • 之后,调用“uploadImage”上传图片。
  • 上传成功之后,返回上传之后的服务端“serverId”,再调用下载多媒体的API,将图片赋值给JSSDK的分享API“onMenuShareTimeline”。

 

 用户可以查看分享效果,如图4.9和图4.10所示。

皇牌天下投注网 4

图4.9  分享到朋友圈编辑的UI  

皇牌天下投注网 5

图4.10  成功分享自定义图片到朋友圈

《微信公众平台网页开发实战——HTML5 JSSDK混合开发解密》

皇牌天下投注网 6

 

欢迎一起交流本书

皇牌天下投注网 7

图4.6  4.2节目录结构

在imageSharing.js文件中增加处理业务的代码如下:

皇牌天下投注网 8

(3)分享到朋友圈,需要JSSDK的“onMenuShareTimeline”。

首先将JSSDK的环境复制一份到本节目录下,创建index.html文件、imageSharing.js文件,目录结构如图4.6所示。

依据需求,构建一个“id”等于“chooseImage”的点击按钮,以及点击按钮后,用来显示选中图片的容器,在index.html文件中增加如下代码:

01 /*
02  函数名称:wxJSSDK.shareApi
03  函数功能:为wxJSSDK增加分享模块
04  参数:
05  shareList(Array) 必选项,待分享的API配置表
06  */
07 wxJSSDK.shareApi = function(shareList){
08     if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完毕
09 
10         //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
11         if(shareList.onMenuShareTimeline){
12             var ParametersTimeline = shareList.onMenuShareTimeline;
13             wx.onMenuShareTimeline({
14                 title: ParametersTimeline.title,   // 分享标题
15                 link: ParametersTimeline.link,  // 分享链接
16                 imgUrl: ParametersTimeline.imgUrl,  // 分享图标
17                 success: function () {
18                     // 用户确认分享后执行的回调函数
19                     ParametersTimeline.success && ParametersTimeline.success();
20                 },
21                 cancel: function () {
22                     // 用户取消分享后执行的回调函数
23                     ParametersTimeline.cancel && ParametersTimeline.cancel();
24                 }
25             });
26         }
27 
28     }else{
29         console.log("抱歉,wx没有初始化完毕,请等待wx初始化完毕,再调用分享服务。");
30     }
31 }
32 /*
33  函数名称:wxJSSDK.imageApi
34  函数功能:为wxJSSDK增加图像服务
35  参数:
36  imageApi 图像API Object 配置
37  */
38 wxJSSDK.imageApi = function(imageApi){
39     if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完毕
40         if(imageApi){
41 
42             imageApi.chooseImage && wx.chooseImage({//拍照或从手机相册中选图接口
43                 success: function (res) {
44                     imageApi.chooseImage.success && 
45 imageApi.chooseImage.success(res);
46                 }
47             });
48 
49             imageApi.previewImage && wx.previewImage({ // 预览图片接口
50                 current: imageApi.previewImage.current,  // 当前显示的图片链接
51                 urls: imageApi.previewImage.urls    // 需要预览的图片链接列表
52             });
53 
54             imageApi.uploadImage && wx.uploadImage({ // 上传图片接口
55                 localId: imageApi.uploadImage.localId,   // 需要上传的图片的本地ID,
56 由chooseImage接口获得
57                 isShowProgressTips: imageApi.uploadImage.isShowProgressTips || 1, // 
58 默认为1,显示进度提示
59                 success: function (res) {
60                     imageApi.uploadImage.success && 
61 imageApi.uploadImage.success(res);
62                 }
63             });
64 
65             imageApi.downloadImage && wx.downloadImage({//下载图片接口
66                 serverId:imageApi.downloadImage.serverId, // 需要下载的图片的服务器端
67 ID,由uploadImage接口获得
68                 isShowProgressTips: imageApi.downloadImage.isShowProgressTips || 1, // 
69 默认为1,显示进度提示
70                 success: function (res) {
71                     imageApi.downloadImage.success && 
72 imageApi.downloadImage.success(res);
73                 }
74             });
75         }else{
76             console.log("缺少配置参数");
77         }
78     }else{
79         console.log("抱歉,wx没有初始化完毕,请等待wx初始化完毕,再调用图像接口服
80 务。");
81     }
82 
83 }
84 
85 window.onload = function(){
86     var chooseImageID, // 拍照或从手机相册中选图接口
87         shareImage,
88         uploadImage = function(back){
89             wxJSSDK.imageApi({ // 上传图片···
90                 uploadImage:{
91                     localId:chooseImageID.toString(),
92                     success:function(res){//临时access_token,上传图片成功之后,执行分
93 享操作
94                    shareImage = 
95 "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=
96 eQv3HPwEFxwsw8cyh5O7DjaNOoGd4d-jYtG_c9uW-YbwUYxkMywh_O3LCC
97 ZtmX8ZWr8np0Q5CqAox7lghNkNuiNHU8M618jbRvcaLjQuHq8&media_id=" res.serverId; // 返回图片的服务器端ID
98                         back && back();
99                     }
100                 }
101             });
102         },
103         shareTimeline = function(){
104             uploadImage(function(){
105                 wxJSSDK.shareApi({     // 分享图片···
106                     onMenuShareTimeline : {   // 分享到朋友圈
107                         title: "实例:从手机相册中选照片然后分享!", // 分享标题
108                         link: 'http://weibo.com/xixinliang',  // 分享链接
109                         imgUrl: shareImage,    // 分享图标
110                         success: function () {
111 
112                         },
113                         cancel: function () {
114 
115                         }
116                     }
117                 });
118             });
119         };
120     $("#chooseImage").click(function(){
121         wxJSSDK.imageApi({
22             chooseImage:{
23                 success:function(res){
24                     chooseImageID =  res.localIds[0]; // 返回选定照片的本地ID列表,
25 localId可以作为img标签的src属性显示图片
26                     $("#imageContainer").html("<img style='width: 30%' 
27 src='" chooseImageID "'>");
28                     $("#selectImg").html("已选择图片,请点击右上角分享到朋友圈按钮");
29                     shareTimeline();
30                 }
31             }
32         });
33     });
34 }

 

本文由皇牌天下投注网发布于计算机教程,转载请注明出处:微信公众平台网页开发实战--皇牌天下投注网2.从

关键词:

频道精选

最火资讯