微信页面开发 第一次总结

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

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页面需要引用百度的库,可以直接用百度的链接[email protected]/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/[email protected]/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;
}
时间: 2024-10-11 04:53:13

微信页面开发 第一次总结的相关文章

微信页面开发 第三次总结

暂停微信页面开发,先处理yxt安卓司机版本. 司机端需求: 登入功能(由管理员分配账户),导航地图(提供搜索功能,寻找地点,快速导航) 接单控制=>是否接单,是否自动接单,接单类型 接单:当乘客抢到单后,司机有120秒时间可以抢单.参与抢单的司机会显示订单被抢,显示被谁抢.自己抢到,则显示去接乘客,或者呼叫乘客,去接乘客则显示路线导航,呼叫乘客则拨打乘客电话, 在接乘客时候显示距离和电话按钮,(乘客端可显示司机距离),司机点击接到乘客,订单状态变为服务中,同时,乘客端收到服务开始的消息. 服务过

微信页面开发 第二次总结

1.微信目前不支持es6,调试困难.. 2.微信获取页面js-sdk的ticket,参考开发文档. 3.微信支付功能比较困难. 4.后台发起请求,可以用koa-request var response = yield request(options); var json = JSON.parse(response.body); 获取到ticket要保存下来.放在本地文件或者数据库. 5.appid要对应好js的安全域名接口.不然会跳出无效的域名. 6.多看看开发文档和demo,比自己瞎写有效的多

注册绑定页面及微信二维码登陆页面开发项目总结

乐帝来到新的实习单位,也许是之前面试或者在爱奇艺实习的履历,很快被项目组"委以重任".而不是老套路刚入职,先在架构师那培训两周,专心钻研框架,不问具体业务.乐帝只有几天看框架的时间,当被分配给框架页面时,还是不能得心应手,正如同事所说,学习还得按部就班,写写例子,看代码是不行的.    目前这家公司类似<走出软件作坊>作者阿朱所在行业,是面向中大型企业,提供人才管理解决方案的软件公司,时髦的词叫SAAS.这类公司层次要比外包公司高,却还有很多外包公司的特点,不像互联网公司有

C#开发微信门户及应用(44)--微信H5页面开发的经验总结

在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页面,给我们提供了很大的便利,本文是在自己做的一些H5微信应用页面上做了一些功能总结,希望能够给大家提供一定的帮助. 1.微信网页开发 1) JSSDK 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语

[转载]微信企业号开发如何建立连接

连接将使你的企业号更具价值,你可以使用以下三种方式,连接你的企业号及企业应用: 1.企业应用调用企业号提供的接口,管理或查询企业号后台所管理的资源.或给成员发送消息等,以下称主动调用模式. 2.企业号把用户发送的消息或用户触发的事件推送给企业应用,由企业应用处理,以下称回调模式. 3.用户在微信中阅读企业应用下发的H5页面,该页面可以调用微信提供的原生接口,使用微信开放的终端能力,以下称JSAPI模式. 通过这三种连接方式的结合,你可以在企业号中建立功能强大的移动轻应用,并依托微信数亿活跃用户,

PHP微信支付开发实例

这篇文章主要为大家详细介绍了PHP微信支付开发过程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 PHP微信支付开发过程,分享给大家,供大家参考,具体内容如下 1.开发环境 Thinkphp 3.2.3 微信:服务号,已认证 开发域名:http://test.paywechat.com (自定义的域名,外网不可访问) 2.需要相关文件和权限 微信支付需申请开通 微信公众平台开发者文档:http://mp.weixin.qq.com/wiki/home/index.html 微信支付开发者文档

微信页面设计weui(1)——入门

1.weui下载 WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页开发量身设计,可以令用户的使用感知更加统一.在微信网页开发中使用 WeUI,有如下优势: 同微信客户端一致的视觉效果,令所有微信用户都能更容易地使用你的网站 便捷获取快速使用,降低开发和设计成本 微信设计团队精心打造,清晰明确,简洁大方 该样式库目前包含 button.cell.dialog.progress.toast.article.icon 等各式元素,已经在 GitHub 上开源.访问 h

微信平台开发之利用本地环境加新花生壳解释做测试环境

准备工作: 1.搭建本地PHP开发环境. 2.注册并安装新花生壳. 3.注册微信公众平台帐号. 第一步:搭建本地PHP开发环境,案例使用wamp集成环境. 下载并安装集成环境确保集成环境正常运行. 第二步:注册并安装新花生壳,过程(略). 具体教程可查看http://www.oray.com/ 第三步:对开发环境做解释. 登陆花生壳做解释: 开放wamp的外部访问:教程http://hi.baidu.com/aubbll/item/8bd5a52253d3ecd7a517b685 至此,外网就可

微信商城开发系列第四篇 不写代码玩转微信公众号

本系列文章属作者原创文章,请尊重作者的劳动成果,转载请注明出处:walkingmanc的专栏 , 谢谢! 同时欢迎大家加入微信商城开发QQ群:364072602,共同探讨进步.  为什么叫不写代码玩转微信公众号呢? 我们大家都知道,微信公众号有两种模式,一种是编辑模式,一种是开发模式.所谓的不写代码玩转微信公众号,其实就是在编辑模式下如何使用微信公众号的意思,呵呵,是不是有种恍然大悟的感觉. 其实,如果你关注的微信公众号比较多的话,你会发现有很多有名的公众号,它们没有菜单,每天都会发布4到5篇文