微信公众号网页及 JS-SDK 开发
微信公众号除了提供基于消息的信息组织、管理和发布方式外，还可以通过开发用户自定义网页来深入定制公众号的信息交互功能。公众号网页采用标准的HTML/JS/CSS语言开发，除了传统的开发方式外，微信也提供了相应的接口（JS-SDK）和工具（Web开发者工具）来方便网页功能的开发。
这里先介绍一下JS-SDK，这是微信公众平台提供的一套访问微信特定功能的接口，比如分享、扫码、拍照、位置、语音、支付等功能。网页中使用微信的这些功能，需要通过调用公众平台接口来实现。访问这些接口，微信提供了一套标准的方法，下面以测试号来详细说明一下。
一、JS-SDK使用配置
申请好的测试号，需要配置一下JS接口安全域名，就是自己服务器的域名，到公众号管理后台，选择“开发者工具-web开发者工具”，输入域名即可（无http|https）。标准公众号（需认证）的配置方法是类似的。
二、定制网页（调用JS-SDK接口）
定制网页就按照需求写相应的代码即可，这里主要是详细介绍一下如何在网页中调用JS-SDK的接口。按照微信的要求，首先需要对调用接口的网页注入授权验证，这个是通过调用JS-SDK的wx.config()函数完成的，里面有一个主要的参数就是“signature”（签名），出于安全的考虑，签名需要从后端生成后给前端网页授权使用。
根据所调用接口的不同，后端生成签名时需要的几个主要参数包括：noncestr（随机串）、ticket（js-sdk接口使用票据，通过access_token获取）、timestamp（时间戳）、url（需要调用接口的网页链接），下面给出示例代码（python）：
jssdk.py #生成签名，redissession代码参看这篇文章
import time
import config
from wechatpy.utils import random_string
from wechatpy import WeChatClient
from redisclient import redissession
class jsSDK:
def getJsSdk(self, url):
appId = config.appId #测试号的appId和secret在公众号后台可查到
secret = config.secret
noncestr = random_string() #生成随机串
timestamp = int(time.time()) #生成时间戳
client = WeChatClient(appId, secret, session=redissession)
ticket = client.jsapi.get_jsapi_ticket() #生成接口访问票据
signature = client.jsapi.get_jsapi_signature(noncestr, ticket, timestamp, url) #生成签名
return {'appId': appId, 'timestamp': str(timestamp), 'nonceStr': noncestr, 'signature': signature, 'url': url} #返回签名等数据供前端使用homepage.py #生成js-sdk接口调用的网页，使用了web.py的模板引擎
import web
from jssdk import jsSDK
class HomePage:
def GET(self):
#使用了层次模板base.html，后面有定义
render = web.template.render('templates', base='base')
url = web.ctx.home + web.ctx.fullpath
jssdk = jsSDK().getJsSdk(url)
#渲染home.html模板
return render.home('Hello world', '首页', jssdk)templates/home.html #首页模板
$# jssdk 是从homepage.py传入的。生成调用接口参数传给层次模板base.html
$def with (name, title, jssdk)
$var title: $title
$var appId: $jssdk['appId']
$var timestamp: $jssdk['timestamp']
$var nonceStr: $jssdk['nonceStr']
$var signature: $jssdk['signature']
$var url: $jssdk['url']
<div class="weui-panel__bd">
<a aria-labelledby="js_p1m1_bd" href="javascript:" class="weui-media-box weui-media-box_appmsg">
<div aria-hidden="true" class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="https://www.kflyo.com/wp-content/uploads/..." alt="">
</div>
<div aria-hidden="true" id="js_p1m1_bd" class="weui-media-box__bd">
<strong class="weui-media-box__title">$name</strong>
<p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
</div>
</a>
<a aria-labelledby="js_p1m2_bd" href="javascript:" class="weui-media-box weui-media-box_appmsg">
<div aria-hidden="true" class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="https://www.kflyo.com/wp-content/uploads/..." alt="">
</div>
<div aria-hidden="true" id="js_p1m2_bd" class="weui-media-box__bd">
<strong class="weui-media-box__title">标题</strong>
<p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
</div>
</a>
</div>templates/base.html #层次模板，根据内嵌的模板参数，生成相应的微信js-sdk接口调用代码，本例演示的是“分享”接口。
$def with (page)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>客飞翱\
$if page.title: : $page.title\
</title>
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css"/>
<script charset="utf-8" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript">
$#鉴权代码
wx.config({
debug: true,
appId: '$page.appId',
timestamp: $page.timestamp,
nonceStr: '$page.nonceStr',
signature: '$page.signature',
jsApiList: [
'checkJsApi',
'updateAppMessageShareData',
'updateTimelineShareData'
]
});
wx.ready(function() {
$#分享接口调用代码
wx.updateAppMessageShareData({
title: '分享的文章',
desc: '测试分享到朋友接口',
link: '$page.url',
imgUrl: 'https://www.kflyo.com/wp-content/uploads/...',
success: function () {
alert('ok')
}
});
});
wx.error(function(res) {
alert('error')
});
</script>
</head>
<body>
<h1><a href="https://www.kflyo.com/" class="weui-btn weui-btn_primary">博客网站</a></h1>
$:page
</body>
</html>index.py #加入微信公众号首页响应代码
import sys
import web
from handle import Handle
from setupmenu import Menu
from homepage import HomePage
sys.path.append('/home/user/webpy')
menu = Menu()
menu.create()
urls = (
'/weixin', 'Handle',
'/weixin/index.html', 'HomePage',
)
app = web.application(urls, globals())
if __name__ == '__main__':
app.run()
application = app.wsgifunc()这样在微信中访问首页https://www.example.com/weixin/index.html 时，调出分享菜单，点击“转发给朋友”按钮，就可以把首页分享给朋友了，朋友打开微信就能看到定义好的分享内容。代码中只写了分享功能，其它接口功能的调用方法是一样的，根据官网的接口说明生成代码即可。