微信开发样式库调用_微信公众号开发后台调用微信接口 - CSDN
  • 微信公众号开发样式库

    千次阅读 2016-10-03 18:13:51
    微信作为一款聊天工具;在中国来说应该是家喻户晓的了;微信在qq横行的时代...我们在服务器上开发一下微信公众号的样式库; ①;在服务器上安装weui; WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方

    微信作为一款聊天工具;在中国来说应该是家喻户晓的了;微信在qq横行的时代异军突起靠的是什么?下面我们来了解一下微信公众号的开发;


    想要开发微信,我们最先要准备的开发工具莫过于一个服务器;有了服务器,我们才能随意的为公众号;添加功能;

    下面;我们在服务器上开发一下微信公众号的样式库;

    ①;在服务器上安装weui;

    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页开发量身设计,可以令用户的使用感知更加统一。在微信网页开发中使用 WeUI,有如下优势:

    • 同微信客户端一致的视觉效果,令所有微信用户都能更容易地使用你的网站
    • 便捷获取快速使用,降低开发和设计成本
    • 微信设计团队精心打造,清晰明确,简洁大方
    该样式库目前包含 button、cell、dialog、progress、toast、article、icon 等各式元素,已经在 GitHub 上开源。访问 http://weui.github.io/weui/ 即可预览。


    在服务器上安装weui

    1:首先需要先安装一下nodejs;

    wget https://nodejs.org/dist/v4.6.0/node-v4.6.0.tar.gz

    ./configure  --prefix=/usr/local/nodejs

    Make && make install

    2:安装好以后在,微信开发目录下输出安装指令

    /usr/local/nodejs/bin/npm install –save weui

    成功后获得node_modules目录

    ②安装成功后使用weui;

    在需要使用weui功能的页面,输出下面代码用来引入weui;

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
            <title>WeUI</title>
            <link rel="stylesheet" href="path/to/weui/dist/style/weui.min.css"/>
        </head>
        <body>
      
        </body>
    </html>
    还可以使用
    git clone https://github.com/weui/weui.git
    cd weui
    npm install -g gulp
    npm install
    gulp -ws
    运行 gulp -ws 命令,会监听 src 目录下所有文件的变更,并且默认会在8080端口启动服务器,

    下面我们就可以使用weui的各种功能样式了

    ①button

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

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

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
            <title>WeUI</title>
            <link rel="stylesheet" href="<span style="color:#FF0000;">引入node_modules目录下的./node_modules /to/weui/dist/style/weui.min.css文件</span>"/>
        </head>
        <body>
    <div>
    <pre><a href="#" class="weui_btn weui_btn_primary">按钮</a>
    <a href="#" class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a>
    <a href="#" class="weui_btn weui_btn_warn">确认</a>
    <a href="#" class="weui_btn weui_btn_disabled weui_btn_warn">确认</a>
    <a href="#" class="weui_btn weui_btn_default">按钮</a>
    <a href="#" class="weui_btn weui_btn_disabled weui_btn_default">按钮</a>
    <div class="button_sp_area">
        <a href="#" class="weui_btn weui_btn_plain_default">按钮</a>
        <a href="#" class="weui_btn weui_btn_plain_primary">按钮</a>
    
        <a href="#" class="weui_btn weui_btn_mini weui_btn_primary">按钮</a>
        <a href="#" class="weui_btn weui_btn_mini weui_btn_default">按钮</a>
    </div>
    </body></html>
    
    


    cell列表视图

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

    Cell 由 thumbnail weui_cell_hd、body weui_cell_bd、accessory weui_cell_ft 三部分组成,cell 采用自适应布局,在需要自适应的部分加上 class weui_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="#">
            <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="#">
            <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">自定义弹窗内容,居左对齐显示,告知需要确认的信息等</div>
            <div class="weui_dialog_ft">
                <a href="#" class="weui_btn_dialog default">取消</a>
                <a href="#" 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="#" class="weui_btn_dialog primary">确定</a>
            </div>
        </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>



    展开全文
  • WEUI是一套基于样式库weui-wxss开发的小程序扩展组件,同微信原生视觉体验一致的UI组件,由微信官方设计团队和小程序团队为微信小程序量身设计,令用户的使用感知更加统一。 官方组件能够满足基础的界面...

    一、WeUI

    WEUI是一套基于样式库weui-wxss开发的小程序扩展组件库,同微信原生视觉体验一致的UI组件库,由微信官方设计团队和小程序团队为微信小程序量身设计,令用户的使用感知更加统一。

     

    官方组件库能够满足基础的界面需求,但是,如果你想要更加饱满的视觉,更加活泼的动效,恐怕 WeUI 就满足不了你的需要了。

    GitHub 地址:https://github.com/Tencent/weui

     

    二、ColorUI 组件库

    ColorUI 是一款高颜值组件库,侧重于视觉交互。比起 WeUI 的低调克制,ColorUI 色彩鲜亮,样式繁多。除了拥有非常丰富的原生组件的自定义样式,它还提供一些常见的页面元素,比如时间轴、步骤条、聊天页、模态窗口等等。

     

    这些页面元素通常应用在哪些场景下呢?

    如果你想做一款诸如日记类、记账类、博客类、Vlog 类的小程序,这时就需要用到「时间轴」。

    如果你想做一款涉及流程的小程序,比如物流跟踪,工作审批等,「步骤条」就可以派上用场了。

    如果你想做一款社交类小程序,那么,当然少不得要用到「聊天」的界面。

    而「模态窗口」则可以应用于各类小程序中出现弹框、侧边栏的地方。

     

    此外,ColorUI 还引入了插件扩展,也就是更为复杂的组件。目前已有的扩展包括索引列表、微动画、全屏抽屉以及垂直导航。引用这几项扩展,只需编写少量代码,就能实现较炫的视觉交互,进一步简化了开发工作。

     

    前面我们已经提到,ColorUI 是侧重于视觉交互的组件库,这方面的表现,还在于它为用户提供了色彩的搭配方案。打开「背景」,可以看到深色、淡色、渐变等多种配色。

     

    ColorUI 还有许多值得推荐的地方。多样化的示例就是其中之一,它详尽地向用户展示了各种情况下,开发者可能需要编写的样式。

    比如,打开「头像」,就会看到被一一列举的圆形头像、圆角矩形头像、各种尺寸头像、默认头像、文字头像、彩色头像、头像组、贴标签头像等等。一个这么简单的组件,也可以有许多种不同的呈现方式。

     

    又比如,打开「列表」,不仅可以看到宫格列表、菜单列表、消息列表、左滑列表等基本的样式,还可以设置一些可选项,像边框、箭头等,在细节处也有多种可选样式。

     

    ColorUI 给大家提供了高度自定义的组件,一些比较麻烦的样式,开发者只需调用其组件就能得以实现。不过,ColorUI 也不是万能的,比如,它尚未涉及购物类小程序所需的组件。

    GitHub 地址:https://github.com/weilanwl/ColorUI

     

    三、Vant 组件库演示

    Vant 是由有赞发布的,轻量的小程序 UI 组件库。如果你想制作一款电商、餐饮、外卖平台、票务预订等购物类小程序,选用 Vant 是较为合适的。为什么这么说呢?

     

    首先,我们来看「业务组件」这一块。可以看到,「商品卡片」与「提交订单栏」两个组件可以构成一个基本的「购物车」页面;而「商品卡片」与「商品导航」二者又可以组成一个简单的商店页面。

     

    我们再看看其他琐碎的组件,比如「表单组件」中的「评分」、「搜索」、「步进器」,都属于购物类小程序需要用到的组件。

     

    「导航组件」中的「徽章」与「展示组件」中的「分类选择」,都可以用于商品品类的选择切换。

     

    「展示组件」中的「折叠面板」与「面板」可以用作详细介绍商品的组件,「步骤条」则可以用于显示物流跟踪信息。

     

    使用 Vant 组件库,除了可以用常用的 Toast 方法,向用户弹出提醒消息,还可以引用「反馈组件」中的「消息通知」以及「展示组件」中的「通告栏」,向用户输出通知信息。

     

    除了以上可用于购物类小程序的组件,Vant 组件库当然还有那些比较通用基本元素、弹出层、Transition 动画等。值得一提的是,Vant 还支持自定义 Actionsheet,在「反馈组件」的「上拉菜单」中,有三种不同的自定义 Actionsheet。

     

    Vant 对开发者非常友好,文档可以说是事无巨细了,而且在文档右侧,还可以预览样式哦。

    开发文档:https://youzan.github.io/vant-weapp/#/intro
    GitHub 地址:https://github.com/youzan/vant-weapp

    四、iViewUI

    iViewUI 是由 TalkingData 发布的组件库。作为一款好用的组件库,布局、面板、列表、表单、顶部导航栏、底部导航栏等组件当然必不可少,那么 iViewUI 除了具备这些标配的组件,还有哪些亮点呢?

    在「导航」分类下,「分页」、「索引选择器」以及「吸顶容器」都是比较实用的组件。

    其中,「索引选择器」与 ColorUI 中的「索引列表」是同类组件,不同的是,ColorUI 的「索引列表」中每一项可以包含图片、名字与描述,且支持搜索,而 iViewUI 的「索引选择器」中每一项只包含名字,且不支持搜索。

    而「吸顶容器」在上文中尚未提及,这一组件适合用于分级长列表的显示。

    在「视图」分类下的「倒计时」一项中,提供了多种倒计时的显示格式。

    iViewUI 同样有详细的文档,但是不支持网页预览,只能打开小程序预览。

    开发文档:https://weapp.iviewui.com/docs/guide/start
    GitHub 地址:https://github.com/TalkingData/iview-weapp

    五、MinUI 组件库

    MinUI 是由蘑菇街发布的组件库。与其他组件库不同的是,MinUI 更注重一些细节的处理。

    调用「基础元件」中的「文本截断」,可以控制长文本的显示行数,文本超长的用省略号结尾。「页底提示」可以用在上拉加载中的过程中。而「价格」则提供了各种样式的价格及货币符号。

    「功能组件」的「异常流展示」为开发者提供了各种异常状态下,向用户展示的界面。「遮罩层」则提供了各种效果的遮罩层,及其显示、隐藏方式。

    相比其他组件库,MinUI 将各种组件拆分得更细,真正使用时,需要开发者更多的对各个组件进行再次结合,但也因此 MinUI 显得更加通用。

    开发文档:https://meili.github.io/min/docs/minui/index.html#README
    GitHub 地址:https://github.com/meili/min-cli

    六、TaroUI

    TaroUI 是由京东·凹凸实验室发布的多端 UI 组件库。这套组件库,可以在 H5、微信小程序、支付宝小程序、百度小程序多端适配运行。TaroUI 的整体风格简约、清新、统一,适合工具、读书、资讯、教育、商务等类型的小程序。

    除了拥有上文所提及的组件之外,TaroUI 还有几个特别的组件。在「表单」中有一项「范围选择器」,可以通过滑动条指定数值范围。在「高阶组件」中,可以显示「日历」,并且支持多种日期选择样式。

    TaroUI 同样拥有健全的开发文档,也支持在网页中预览手机效果。

    开发文档:https://taro-ui.aotu.io/#/docs/introduction
    GitHub 地址:https://github.com/NervJS/taro-ui

    七、WuxUI

    这套组件库所包含的组件最为丰富。不仅我们前文提到的各类组件都可以在 Wux 中找到,而且还有进度环、骨架屏、筛选栏、数字键盘、结果页等实用工具类组件。如果你想开发一款工具类小程序,Wux 是个不错的选择。

    开发文档:https://wux-weapp.github.io/wux-weapp-docs/#/introduce
    GitHub 地址:https://github.com/wux-weapp/wux-weapp/

    这 7 款 UI 组件库各有所长,适合不同的小程序类型,Vant 适合电商类的,TaroUI 与 Wux 适合工具类的,而蘑菇街的 MinUI 当然更适合社区类的了。

     

    展开全文
  • 微信开发调用微信上传图片接口,并保存到自己的服务器 整体思路是这样的: 1.先把手机上的图片上传到微信服务器,然后返回一个图片ID 2.在通过后台根据ID从微信后台拿到流,保存到服务器 前几个步骤在之前的博客上有...

    微信开发 — 调用微信上传图片接口,并保存到自己的服务器

    整体思路是这样的:
    1.先把手机上的图片上传到微信服务器,然后返回一个图片ID
    2.在通过后台根据ID从微信后台拿到流,保存到服务器
    前几个步骤在之前的博客上有提到调通wx.config{}
    js

    $.ajax({
    		type : "post",
    		url : "wx/sys.do", //之前的博客上有写到
    		data : {
    			"url" : location.href.split('#')[0]
    		},
    		dataType : "json",
    		success : function(data) {
    			wx.config({
    				debug : false, // 开启调试模式   
    				appId : data.data.appId,
    				timestamp : data.data.timestamp,
    				nonceStr : data.data.nonceStr,
    				signature : data.data.signature,
    				jsApiList : [ 'checkJsApi', 'uploadImage', 'chooseImage' ]
    			// 必填,需要使用的JS接口列表,所有JS接口列表见附录2 
    			});
    			wx.error(function(res) {
    				alert("出错了:" + res.errMsg);//这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
    			});
    
    			wx.ready(function() {
    				wx.checkJsApi({
    					jsApiList : [ 'chooseImage' ],
    					success : function(res) {
    
    					}
    				});
    			});
    			//点击按钮
    			$("#scanQRCode").click(function() {
    				wx.chooseImage({
    					count : 1, // 默认9
    					sizeType : [ 'original', 'compressed' ], // 可以指定是原图还是压缩图,默认二者都有
    					sourceType : [ 'album', 'camera' ], // 可以指定来源是相册还是相机,默认二者都有
    					success : function(res) {
    						var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
    						localIdArr = localIds;
    						uploadImg(localIds);
    					}
    				});
    			});
    
    		}
    	});
    
    	var int = 0;
    	var serverIdArr = new Array();
    	var localIdArr = new Array();
    	function uploadImg(localIds) {//上传成功,微信服务器会返回一个本地ID,可以预览
    		wx.uploadImage({//根据本地ID获得微信服务器ID
    			localId : localIds[int].toString(), // 需要上传的图片的本地ID,由chooseImage接口获得
    			isShowProgressTips : 1, // 默认为1,显示进度提示
    			success : function(res) {
    				var serverId = res.serverId; // 返回图片的服务器端ID
    				var id = $('#id').val();//id
    				$.ajax({
    					type : "post",
    					//这个方法很重要
    					url : "wx/upload.do?mediaId=" + serverId + "&id=" + id,//mediaId这个就是微信返回的id传到后台
    					data : {
    					//data: {"mediaId": serverId},  
    					},
    					dataType : "json",
    					success : function(msg) {
    						if (msg.code == 1) {
    							top.layer.msg("上传成功!", {
    								icon : 6
    							});
    							location.reload();
    						} else {
    							lock = true;
    							top.layer.msg(msg.msg, {
    								icon : 5
    							});
    						}
    					}
    				});
    
    			}
    		});
    	}
    

    jsp
    因为框架不同 样式可能不太一样
    我这个上传成功后刷新页面从服务器取一下上传的图片

    <div class="layui-input-block" style="margin-top: 10px; margin-bottom: 10px; display: block;" id="divy">
    			<img <c:if test="${url.url == null}">src="images/null.jpg" </c:if> src="/${url.url}" width="160px" height="150px" />
    </div>
    <div class="layui-input-block" style="margin-top: 10px; margin-bottom: 10px;">
    			<button class="layui-btn layui-btn-normal" id="scanQRCode" style="text-align: center; background-color: #ff4e00; width: 160px;">上传微信二维码</button>
    </div> 
    

    Controller

    /**
    	 * @Method 微信图片下载到服务器
    	 * @author 
    	 * @throws Exception
    	 * @createTime
    	 */
    	@ResponseBody
    	@RequestMapping("upload")
    	public JsonBean upload(String mediaId, HttpServletRequest servletRequest, HttpServletRequest request, int id) throws Exception {
    		InputStream input = null;
    		FileOutputStream output = null;
    		try {
    		// 从微信获取的流,这个utils就是根据返回mediaId后去流的
    			input = picDownload.getInputStream(mediaId);
    			String path = "qr";
    			File folder = new File(uploadFilePath + path);
    			if (!folder.exists()) {
    				folder.mkdirs();
    			}
    
    			File targetFile = new File(folder, new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date()) + ".jpg");
    			output = new FileOutputStream(targetFile);
    			IOUtils.copy(input, output);
                //上边就是把图片保存到服务器里
                //下边是数据库的一些操作
    			// 如果数据库有就删除
    			QrMe qrMe = qrMeService.selectTeacherId(id);
    			if (qrMe != null) {
    				qrMeService.deleteUrl(id);
    				new File(uploadFilePath + qrMe.getUrl()).delete();
    			}
    
    			// 添加数据库
    			QrMe newQrMe = new QrMe();
    			newQrMe.setUrl(path + "/" + targetFile.getName());
    			newQrMe.setTeacherid(id);
    			return qrMeService.insertQR(newQrMe);
    		} finally {
    			IOUtils.closeQuietly(input);
    			IOUtils.closeQuietly(output);
    		}
    	}
    

    utils

    package com.admin.commons.utils;
    
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.io.InputStream;
    import java.net.HttpURLConnection;
    import java.net.URL;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Component;
    
    @Component
    public class PicDownload {
    
       //微信接口 
    	@Autowired
    	private WeiXinUtils weiXinUtils;
    	
    	/**
    	 * 根据文件id下载文件
    	 * 
    	 * @param mediaId 媒体id
    	 * @throws IOException
    	 * @throws Exception
    	 */
    	public InputStream getInputStream(String mediaId) throws IOException {
    		InputStream is = null;
    		String url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=" + weiXinUtils.getAccessToken() + "&media_id=" + mediaId;  根据AccessToken获取media
    
    		try {
    			URL urlGet = new URL(url);
    			HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();
    			http.setRequestMethod("GET"); // 必须是get方式请求
    			http.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
    			http.setDoOutput(true);
    			http.setDoInput(true);
    			System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 连接超时30秒
    			System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 读取超时30秒
    			http.connect();
    			is = http.getInputStream();
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    
    		return is;
    	}
    
    	/**
    	 * 获取下载图片信息(jpg)
    	 * 
    	 * @param mediaId 文件的id
    	 * @throws Exception
    	 */
    
    	public void saveImageToDisk(String mediaId) throws Exception {
    		InputStream inputStream = getInputStream(mediaId);
    		byte[] data = new byte[1024];
    		int len = 0;
    		FileOutputStream fileOutputStream = null;
    		try {
    			fileOutputStream = new FileOutputStream("test1.jpg");
    			while ((len = inputStream.read(data)) != -1) {
    				fileOutputStream.write(data, 0, len);
    			}
    		} catch (IOException e) {
    			e.printStackTrace();
    		} finally {
    			if (inputStream != null) {
    				try {
    					inputStream.close();
    				} catch (IOException e) {
    					e.printStackTrace();
    				}
    			}
    
    			if (fileOutputStream != null) {
    				try {
    					fileOutputStream.close();
    				} catch (IOException e) {
    					e.printStackTrace();
    				}
    			}
    		}
    	}
    }
    
    

    刚开始接触这个功能,在网上找了很多资料踩了很多坑,图片不是直接上传到服务器的,而是先上传到微信的服务器,然后再下载到自己的服务器
    前台我用的是layui框架

    展开全文
  • Java调用微信JSSDK那些坑

    千次阅读 2018-04-22 14:28:48
    最近公司项目要求自定义微信分享样式,我就接手了这个微信JSSDK的接口调用。首先你要有一个公众号。然后需要在公众号的设置-公众号设置-功能设置设置我们的安全域名。我们把文件下载下来,然后放到我们填写的域名,...

    最近公司项目要求自定义微信分享样式,我就接手了这个微信JSSDK的接口调用。

    首先你要有一个公众号。

    然后需要在公众号的设置-公众号设置-功能设置

    设置我们的安全域名。


    我们把文件下载下来,然后放到我们填写的域名,注意:一定要放在你要调用微信的接口的路径下一,只能是域名后跟一个目录,

    我们要调用的页面必须是在这个目录下的子目录或者这个目录下。还有如果你用的是SpringMVC的话请对这个域名下的静态资源进行处理。因为微信要去判断你填写的这个域名下是否有这个文件。

    这一步完成之后我们进入 开发-基础配置-服务器配置

    首先我们需要对我们服务器的IP地址加入白名单。



    去启用的我们的服务器信息,这个服务器必须是你要调用微信的JSSDK的项目服务器。


    首先说下这个URL,这个URL必须要能接受微信发送的请求

    微信服务器会给你发送一个请求,这个请求有几个参数

    分别是:signature timestamp nonce echostr

    拿到这四个参数之后,需要将 你在页面中写Token,nonce,timestamp 放入到一个String数组里面,然后进行sort排序,

    排序完成之后将这三个字符串进行拼接,然后使用SHA-1算法进行加密,将加密后的结果与echostr进行比较,相同返回微信发给你的echostr

    具体代码:

    @RequestMapping(value="getToken",method=RequestMethod.GET)
    public @ResponseBody String getToken(String signature,String timestamp,String nonce,String echostr) throws NoSuchAlgorithmException{
    String[] array ={wxToken,nonce,timestamp};
    Arrays.sort(array);
    String newArray="";
    for (int i = 0; i < array.length; i++) {
    	newArray+=array[i];
    }
    //SHA-1加密
    MessageDigest instance = MessageDigest.getInstance("SHA-1");
    instance.update(newArray.getBytes());
    byte[] digest = instance.digest();
    StringBuffer hexstr = new StringBuffer();
    String shaHex = "";
    for (int i = 0; i < digest.length; i++) {
        shaHex = Integer.toHexString(digest[i] & 0xFF);
        if (shaHex.length() < 2) {
    	hexstr.append(0);
        }
        hexstr.append(shaHex);
    }
    if(hexstr.equals(signature)){
    	return echostr;//相同返回微信发给我们的echostr
    }
    return "erro";
    }

    此时就可以完成认证了。

    然后是页面:

         

    var wxObjet;
    	href=encodeURIComponent(window.location.href)//这个参数是用来获取当前页面的url
    	$.ajax({
    		url:用来提供配置权限信息的一个Controller/href,
    		type:"get",
    		dataType:"json",
    		async: false,
    		success:function(data){
    			wxObjet=data;
    		}
    	})
    	
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: wxObjet.aapid, // 必填,公众号的唯一标识
        timestamp: wxObjet.timestamp, // 必填,生成签名的时间戳
        nonceStr: wxObjet.noncestr, // 必填,生成签名的随机串
        signature: wxObjet.Signature,// 必填,签名
        jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ"] // 必填,需要使用的JS接口列表
        
    });

    然后看后台代码:

    @RequestMapping("getJsapi")
    public @ResponseBody Map getJsapi(String url//就是你发送请求的页面){
    		Map map=new HashMap();
    		try {
    			//微信JSSDK Acces_token和jsapi的全局缓存
    			//因为微信的Token和jsapi30分钟内有效,每天只能获取2000次,所以我们要加上缓存。
    			String token ="";
    			String jsapi_ticket ="";
    			Map mes = (Map)redisTemplate.opsForValue().get("mes");
    			Map redis=mes;
    			if(mes==null){
    				redis=new HashMap();
    				token=CommonUtil.getToken(appid, appsecret);//写一个工具类,用来给微信发送请求,请求所需参数:appid,和AppSecret,下面有代码
    				jsapi_ticket= CommonUtil.getJsapi_ticket(token);//拿到微信给我们的token之后我们去获取jsapi_ticket.下,下面有代码
    				//放入ticket
    				redis.put("ticket",jsapi_ticket);
    				redis.put("ticketDate",new Date().getTime());
    				//放入token
    				redis.put("token",token);
    				redis.put("tokenDate",new Date().getTime());
    				redisTemplate.opsForValue().set("mes", redis);
    			}else{
    				long  tokenDate=(long)mes.get("tokenDate");
    				if(new Date().getTime()-tokenDate>=1200000){
    					token=CommonUtil.getToken(appid, appsecret);
    					//放入token
    					System.out.println(token);
    					redis.put("token",token);
    					redis.put("tokenDate",new Date().getTime());
    				}else{
    					token=(String) mes.get("token");
    					
    				}
    				long  ticketDate=(long)mes.get("ticketDate");
    				if(new Date().getTime()-ticketDate>=1200000){
    					jsapi_ticket= CommonUtil.getJsapi_ticket(token);
    					//放入ticket
    					redis.put("ticket",jsapi_ticket);
    					redis.put("ticketDate",new Date().getTime());
    				}else{
    					jsapi_ticket = (String)mes.get("ticket");
    				}
    				redisTemplate.opsForValue().set("mes", redis);
    			}
    			
    			
    			
    			
    			//生成一个随机字符,我这里直接用时间戳来代替了
    			long time = new Date().getTime();
    			String noncestr = String.valueOf(time);
    			//时间绰
    			long time2 = new Date().getTime();
    			String timestamp=String.valueOf(time2/1000);//微信接收的时间戳是10位的所以咱们要除以1000
    			//去使用SHA-1获取安全签名 ,下面有代码
    			String jsSDKSignature = CommonUtil.getJsSDKSignature(jsapi_ticket, noncestr, timestamp, url);
    			map.put("Signature",jsSDKSignature);//将所有验证权限所需要数据放入一个map,这个是安全签名
    			map.put("noncestr",noncestr);//这个是随机字符
    			map.put("aapid",appid);//这个是咱们的APPID
    			map.put("timestamp", timestamp);//这个是时间戳
    			return map;
    		} catch (IOException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    		return map;
    	}

    工具类代码

    
    import java.io.IOException;
    import java.security.MessageDigest;
    import java.security.NoSuchAlgorithmException;
    import java.util.ArrayList;
    import java.util.Arrays;
    import java.util.List;
    import java.util.Map;
    
    import org.apache.http.HttpEntity;
    import org.apache.http.NameValuePair;
    import org.apache.http.ParseException;
    import org.apache.http.client.ClientProtocolException;
    import org.apache.http.client.methods.CloseableHttpResponse;
    import org.apache.http.client.methods.HttpGet;
    import org.apache.http.impl.client.CloseableHttpClient;
    import org.apache.http.impl.client.HttpClients;
    import org.apache.http.message.BasicNameValuePair;
    import org.apache.http.util.EntityUtils;
    
    import com.alibaba.fastjson.JSON;
    
    /**
     * 拿到微信的Access_Tocken
     * 
     * @author liuyk
     *
     */
    public class CommonUtil {
    	public static String getToken(String appid, String appSecret) throws ClientProtocolException, IOException {
    		CloseableHttpClient httpclient = HttpClients.createDefault();
    		// 创建参数队列
    		List<NameValuePair> params = new ArrayList<NameValuePair>();
    		params.add(new BasicNameValuePair("grant_type", "access_token"));
    		params.add(new BasicNameValuePair("appid", appid));
    		/* secret */
    		params.add(new BasicNameValuePair("appid", AppSecret));
    		String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + appid + "&secret="
    				+ appSecret;
    		// 创建httpget.
    		HttpGet httpget = new HttpGet(url);
    		// 发送请求
    		CloseableHttpResponse response = httpclient.execute(httpget);
    		// 得到响应提
    		HttpEntity entity = response.getEntity();
    
    		String param = EntityUtils.toString(entity);
    		System.out.println(param);
    		// 将JSON转换为Map
    		Map parseParam = (Map) JSON.parse(param);
    		Object object = parseParam.get("access_token");
    		return object.toString();
    	}
    
    	public static String getJsSDKSignature(String jsapi_ticket, String noncestr, String timestamp, String url) {
                //这几个参数名按照字典顺序进行拼接
    		String string = "jsapi_ticket=" + jsapi_ticket;
    		string += "&noncestr=" + noncestr;
    		string += "&tamp=" + timestamp;
    		string += "&url=" + url;
                    
    		StringBuffer hexstr = new StringBuffer();
    		try {
    			MessageDigest md = MessageDigest.getInstance("SHA-1");
    			// 对接后的字符串进行sha1加密
    			md.update(string.getBytes());
    			byte[] digest = md.digest();
    			String shaHex = "";
    			for (int i = 0; i < digest.length; i++) {
    				shaHex = Integer.toHexString(digest[i] & 0xFF);
    				if (shaHex.length() < 2) {
    					hexstr.append(0);
    				}
    				hexstr.append(shaHex);
    			}
    		} catch (NoSuchAlgorithmException e) {
    			e.printStackTrace();
    		}
    		return hexstr.toString();
    	}
    
    	public static String getJsapi_ticket(String access_token) {
    		String ticket = "";
    		String requestUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + access_token
    				+ "&type=jsapi";
    		CloseableHttpClient httpclient = HttpClients.createDefault();
    		// 先从线程中取值,如果取不到,说明没有使用线程,再利用这个方法获取
    		// 因为发送信息等操作,都是调用的这个方法,所以在这里进行处理一下吧
    		HttpGet httpget = new HttpGet(requestUrl);
    		// 发送请求
    		CloseableHttpResponse response = null;
    		try {
    			response = httpclient.execute(httpget);
    		} catch (IOException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    		// 得到响应提
    		HttpEntity entity = response.getEntity();
    
    		String param = null;
    		try {
    			param = EntityUtils.toString(entity);
    		} catch (ParseException | IOException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    		System.out.println(param);
    		// 将JSON转换为Map
    		Map parseParam = (Map) JSON.parse(param);
    		Object object = parseParam.get("ticket");
    		return object.toString();
    	}
    
    }

    //前端的权限认证之后我们把要用的微信接口放入ready回调里面
    wx.ready(function(){
    	/* 分享到朋友圈 */
    	wx.onMenuShareTimeline({
        title: '', // 分享标题
        link: '', // 分享链接,这个链接必须是你配置的jssdk的安全域名,如果不是在那个域名或者路径下会没有效果
        imgUrl: '', // 同上
    
        });
      /*分享给朋友  */
    	wx.onMenuShareAppMessage({
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接,该链接域名必须与当前企业的可信域名一致
        imgUrl: '', // 分享图标
        type: '', // 分享类型,music、video或link,不填默认为link
        dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
        success: function () {
            alert("分享成功");
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
            alert("已取消分享");
        }
    });

    以上就是整个流程,如果有什么问题可以来问我,很欢迎帮忙解决。




    展开全文
  • thinkphp中引入微信库

    2017-12-19 09:48:18
    微信库文件存放在\ThinkPHP\Library\Vendor\wechat 引入 vendor('wechat.wechat');  $WeChat = new \wechat(); ========================================================= 发送微信公共号模板消息 private ...
  • 微信开发的概念

    2019-12-03 23:23:16
    微信开发的概念 什么是微信开发 微信这个软件,提供了聊天、支付、分享、收藏等各种功能,同时用户基数庞大; 微信对外开放了很多接口和能力,程序员基于这些功能进行的二次开发,叫做微信开发 微信开放平台 微信...
  • 微信公众号支付H5调用支付详解

    万次阅读 2018-01-16 15:03:26
    最近项目需要微信支付,然后看了下微信公众号支付,,虽然不难,但是细节还是需要注意的,用了大半天时间写了个demo,并且完整的测试了一下支付流程,下面分享一下微信公众号支付的经验。 一、配置公众号微信...
  • 企业微信自建应用开发初探

    千次阅读 2019-04-04 17:21:42
    企业微信是腾讯推出的一个新的办公协作平台,通过与微信一致的沟通体验,为企业员工提供最基础和最实用的...本文以该项目为例对在企业微信平台开发企业应用的特点进行了总结,重点分析了企业微信开发平台对应用开发...
  • 如果你要开发自己的微信小程序或者小游戏,微信开发者工具是必不可少的,因为有些微信封装的方法只有微信开发者工具上才能使用,还有一个重要的原因就是,我们提交我们的代码审核必须通过该工具来提交,所有要做微信...
  • 本人已经实现小程序webview 调用ectouch的h5页面,然后由h5发起调用微信地址。大家有兴趣可以看看我的小程序示例,我小程序里面有我的联系方式 不懂的从小程序上联系我咨询,微信小程序那里搜索:飞机杯男用
  • 通过python,连接到微信账号,收集好友性别、城市、个性签名等公开信息,使用 Python 进行数据统计与分析,得到你专属的朋友圈的分析报告! github地主:https://github.com/KaguraTyan/wechat_analysis_wxpy 1、...
  • 由于公司需要开发小程序项目,就查看了小程序的官方文档 很多地方看到 有关基础的东西在开发工具中的配置项中也看到了 于是就在想 这个基础 就是微信客户端的版本? 官方文档有一个 小程序的运行环境,基础...
  • 关于手机端的浏览器的兼容性问题相信一直是开发者们的一块心病,对于微信开发前端组件这一块总是找不到合适的移动端组件,什么都要自己去实现,这个开发成本就大了去了。于是乎博主打算另辟蹊径,找找基于微信开发的...
  • 知识库微信小程序开发

    千次阅读 热门讨论 2016-11-29 11:40:53
    11月,CSDN知识研发负责人尚林凯在厦门进行了微信小程序开发的分享。在1个小时的分享时间里,谈到小程序开发给技术人带来的...以下为 CSDN 知识推出的“微信开发”知识图谱,能够更好地帮助读者了解微信小程序在微
  • 零基础入门微信小程序开发

    万次阅读 多人点赞 2019-07-16 13:27:41
    本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装...
  • 微信公众平台开发网页开发

    万次阅读 2018-07-11 14:28:43
    以前写过一篇《微信公众平台开发的一点收获》,这一篇说说微信公众平台网页开发的知识。微信公众平台应该是国内最大的开放平台,对于技术开发人员来说,不管有没有自己的公众号,应该也要有一定的了解,其实只要有一...
  • 这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...
  • 对于微信开发而言,它和普通的web项目其实并没什么区别。微信项目也是web项目的一种,只不过它是在微信的内置的QQ浏览器里运行,更多的在手机端运行。微信本地开发,需要注意的就是调试与测试,因为页面要做手机端...
1 2 3 4 5 ... 20
收藏数 16,250
精华内容 6,500
关键字:

微信开发样式库调用