首页 > 代码库 > 微信页面开发 第一次总结
微信页面开发 第一次总结
总结能让自己的知识体系，经验深度更牛逼更稳固，虽然写一篇博文挺花费时间的。
1.npm下载太慢，可以用cnpm，淘宝的镜像，10分钟同步一次npm，安装方法
npm install --registry=https://registry.npm.taobao.org -d cnpm -d可以显示安装详情。
2.需要实现语音功能，发现可以用百度的text2audio，开发详情地址：http://yuyin.baidu.com/docs/tts/136;
h5页面需要引用百度的库，可以直接用百度的链接.0.2.1@baidu-speech-synthesizer/dist/index.min.js 也可以cnpm i baidu-speech-synthesizer
在微信上可以运行demo：
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="http://www.mamicode.com/node_modules/.0.2.1@baidu-speech-synthesizer/dist/index.min.js"></script>
<script src="https://unpkg.com/jquery"></script>
<audio >
<source id=‘_src‘ type="audio/mpeg">
</audio>
<body>
<input id=‘text‘></input>
<br>
<button id=‘2audio‘ onclick=‘_click()‘>播放</button>
</body>
<script>
$(‘#text‘).val(‘语音功能测试‘);
function _click(){
var text = $(‘#text‘).val();
$(‘#_src‘)[0].src = "http://tts.baidu.com/text2audio?ctp=1&cuid=baidu_speech_demo&lan=zh&pdt=1&per=0&pit=5&spd=5&tex="+encodeURI(text)+"&vol=5";
var bgMusic = $(‘audio‘).get(0);
bgMusic.load();
bgMusic.play();
}
</script>
如果需要在APP里面运行，demo：
function startPlay() {
if(!$(‘#didiyuying‘).val()){
return null;
}
var url = ‘http://tts.baidu.com/text2audio?ctp=1&cuid=baidu_speech_demo&lan=zh&pdt=1&per=0&pit=5&spd=5&tex=‘+ encodeURI($(‘#didiyuying‘).val())+‘&vol=5‘
p = plus.audio.createPlayer( url );
p.play( function () {
outSet( "播放完成！" );
// 播放完成
stopPlay();
}, function ( e ) {
outLine( "播放音频文件\""+url+"\"失败："+e.message );
} );
}
3.百度地图，http://developer.baidu.com/map/jsdemo.htm#i8_2，这里是各类官方的demo，甚至已经包括预测打车费用等。
map = new BMap.Map("allmap");
map.centerAndZoom(point, 15); //地图实例化
这两句最好要连在一起写，否则会一开始的定位不准。
4.微信公众号开发入门篇：http://mp.weixin.qq.com/s?__biz=MjM5MzkxODQ5NA==&mid=2651442645&idx=1&sn=a2dac69114c2d617e49d3bfcb9f96a07&chksm=bd72d6a48a055fb2fa36380e363901458c0639b30199cc899628a679bdc275ddfee0142ab771&mpshare=1&scene=23&srcid=1124D9yw7BS3WWPDRP33Kr53#rd
入门级别的。
5.Q.denodeify运行demo
var dbConn = require(‘mssql‘);
var pg = require(‘pg‘);
var Q = require(‘q‘);
var co = require(‘co‘);
var log4js = require(‘log4js‘);
var logger = log4js.getLogger();
logger.setLevel(global.Level);
var app = require(‘koa‘)()
var helloWorld = Q.denodeify( function (callBack){
var printHello = function (str) {
logger.info(str);
return str
}
callBack(null, printHello);
})();
function showHello(str){
return helloWorld.then(function(printHello){
return printHello(str);
},function(error) {
logger.error(error);
})
}
app.use(function *(next){
this.body = yield showHello(‘Hello World‘);
});
app.listen(3000);
6.node文本替换
let reg = /\{test([+-]\d*)?\}/g;let input = "test {test+1}"
function addTest(add){
return add;
}
while(x=reg.exec(input))
{
if(x[1]!=""&&x[1]!=undefined)
add=parseInt(x[1]);
else
add=0;
input =input.replace(x[0],addTest(add));
}
console.log(input);
7.window.open 不能在手机端用。
父页面打开window.open(‘test.html‘);
子页面可以用window.opener.xxx来处理父页面的任何内容。
8.css @media only screen and (max-height: 420px)
可以处理不同页面显示问题
margin（0 0 0 0）顺序为上右下左。
让div居中，可以这样写{
top:50%,
left: 50%,
margin: -50% 0 0 -50%
width: 100%,
height: 300px
}
9.es6中
遍历对象：
for(var key of Object.keys(obj)){
console.log(key)}
字符串模板：
最简单的demo：
var name = ‘丁香医生‘;var desc = ‘丁香医生是面向大众的科普性健康类网站‘;var html = function(name, desc){ var tpl = ‘公司名：‘ + name + ‘\n‘+ ‘简介：‘+ desc; return tpl;}微信页面开发 第一次总结