微信页面开发 第一次总结

总结能让自己的知识体系,经验深度更牛逼更稳固,虽然写一篇博文挺花费时间的。

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="./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;
}

微信页面开发 第一次总结

上一篇:iOS 学习笔记(截屏)


下一篇:Android 自定义ViewGroup