您的位置：首页 > 移动开发 > 微信开发

微信公众号入门

2016-07-25 16:10 441 查看

切记一切以官方文档为准。

微信公众号项目开发的技术架构：html5+nodejs+php+mysql。

前端： html5（view层）+nodejs（control层）

后端：php（model层/control层）+ redis + mysql

前端使用的是Express web框架，模板引擎是Embedded JS（ejs）原因：容易上手。

环境搭建就略。（自行百度）

开发调试：微信开发者工具。

PS：微信开发者工具最新版本，请到此地址下载：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

项目运行，首先 redis 启动，然后再启动supervisor（node里面的插件）监听项目。

然后在浏览器输入“http://192.168.0.1:8088/ABC”。

app.js(项目主要入口，详细请看nodejs教程)

config文件下的config.json配置（通过建立json配置文件来配置一些常用的参数，比如说访问路由的地址）

domain 外部域名(URL):http://snwuariyte.proxy.qqbrowser.cc //代理域名，使用QQ浏览器
"apiURL" : "http://192.168.0.1:8888" //后台地址

"app_id" : "sdfsdfsadfdfasfd",//自己的微信号配置
"app_secret" : "sdfsdfsadf",//自己的微信号配置

"jsapi_sign" : {
"appId" : "sdfsdfsadf",//
"appSecret" : "sdfsdfsadf",

}

接着找到路由文件routes

xxxx.js

//路由指向哪个后端方法

router.get('/ssss', function (req, res,next) {

//获取session里面对象

var user_id = req.session.XXX_id;

var xxx_info = {
user_id: user_id,
identity: config.identity.aaa
};

xxx_service.get_xxx_info(xxx_info, function (err, result) {
var result = JSON.parse(result);//序列化json数据
//跳转到对应页面
res.render('sss/ADC', {
//因为使用ejs模板引擎，需要传参数。
title: 'sss',
config:config
});
});

});

xxxx.ejs模板------js部分

var bbbb = {
//获取ssss_id 注意路由传的的参数 res.render
'user_id' : '<%=sss_id %>',

'geta': function () {
return $('.use');
},

'getaaaAjax': function () {

var _this = this;

$.ajax({
type: 'GET',
url: '/dsdasda',
data: _this.getXXXInfo(),
dataType: 'json',
success: function (i) {

if (i.code == 0) {
//设置二维码
_this.setQrcode(i.data.ticket);
} else {
console.log(i.message);
}
},
error: function (err) {
console.log(err)
}
});
},

'init': function () {
//抽取出来初始化
this.getaaaAjax();
}

};

(function () {
//初始化方法
bbbb.init();
})();

顺便提一下，这种就是面向对象的js高级写，jq插件经常都是这样写的。

xxxx.ejs模板------html部分

<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<!--动态输入标题-->
</head>

<body>
<!--动态引入ejs模板文件-->
<% if (ssss) { %>
<% include XXX.ejs %>
<% } %>
</body>
</html>

以上是前端部分，后端部分是逻辑业务处理，我就不写了。

注意json序列化，看看需不需要，如果报Unexpected token o错误原因，就不需要序列化。

注意使用微信客户端运行的时候要用snwuariyte.proxy.qqbrowser.cc，不能是用ip地址访问。

注意微信按钮微信共众号先获取access_token, 然后在微信调试工具（QQ浏览器插件）运行才可以。

注意一下微信那个jsapi

<script>
wx.config({
debug: true, //设置false就关闭提示
appId: '<%= jsapi.appId %>',
timestamp: '<%= jsapi.timestamp %>',
nonceStr: '<%= jsapi.nonceStr %>',
signature: '<%= jsapi.signature %>',
jsApiList: ['chooseImage','previewImage','uploadImage','downloadImage','onMenuShareTimeline', 'onMenuShareAppMessage']
});
</script>

注意先引用模块“var weixin_jsapi = require('../../../services/weixin_jsapi');“ ，就可以调用模块里面的方法，如weixin_jsapi.getSignature()。

注意app.js文件有无判断浏览器UA标识是否MicroMessenger ，否则就在电脑浏览器模拟器打开会出现“请在微信客户端打开”的问题。如不想注释的话，请使用QQ浏览器里面的微信，就可以绕过去了。

微信js-sdk常见问题：

1.注意微信配置文件。

（1）注意配置参数类型是否相同。

（2）注意生成签名的url是否与当前的url相同

（3）注意前端传的url有没有encodeURIComponent(),后端有没有url解码，生成签名。

PS: 微信接口调试页 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
2.注意微信分享接口url是必须是固定的，切记不要动态改变url，否则分享出来链接就不是微信的分享标签。（带文字与图片）

如：http：//www.xxx.com/share.html 正常

http：//www.xxx.com/share.html?flag=1 不正常

不是带参数不正常，而是动态改变了一下url内容，然后再分享出去的时候，分享出去就不是微信的分享标签，而是一个普通的链接。

PS：特别强调一点，分享链接不一定是当前页面的url，分享
链接域名或路径必须与当前页面对应的公众号JS安全域名一致。也就是说只要是微信公众号设置安全域名相同就可以了。（建议配置一级域名）

ios微信一定是需要80端口，其他端口号无效。

[b]3.注意微信支付建议一定要看官网文档下面的演示代码，注意接受与传的参数的大小写字母，一定要相同。[/b]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航