微信公开课

微信公开课小程序热议问题「转微信小程序填坑-Android真机环境下的bluebirdjs」
摘要：如何解决转微信小程序填坑-Android真机环境下的bluebirdjs
展开：今天，有朋友反映说，我的微信小程序的例子在andriod真机环境下运行出错，研究调试了半天，发现原来是使用的bluebird.js(Promise实现库)导致的。由于小程序框架最近的更新中移除了原生Promise的支持，喜欢使用Promise特性的开发者都会去引入其他的第三方Promise库来替代，bluebird.js是一个性能不错，特性又丰富的Promise实现库，所以大家都爱用。不过，由于bluebird.js中有些代码还是用到了document对象上的方法，在iOS的真机JavascriptCore环境中，貌似这些代码并不会被触及到，而在Android真机环境中，就会被执行到这块代码，导致了错误的发生。怎么办呢找找其他能用的库吧，Promise实现库还算比较多的NPM上搜搜就有。其中es6promise是另一个被开发者下载使用比较多的库。通过npm命令我们可以很方便的将它下载下来：npminstalles6promise然后在下载下来的文件夹下，把dist目录中的es6promise.js或es6promise.min.js复制到你的微信小程序项目中，替换原来的bluebird.js就行啦，标准的PromiseAPI一个都不会少。而且es6promise的代码文件体积比bluebird小个3，4倍，也算一个好处吧只能这么自我安慰了...哈哈希望这篇文章能解决同样遇到这个问题的朋友。原作者：一斤代码简书作者原文链接：http://www.jianshu.com/p/d29746bf29e3
更多有关转微信小程序填坑-Android真机环境下的bluebirdjs的小程序开发问题勤请扫码关注微信公开课小程序参与讨论！

微信公开课小程序热议问题「转微信小程序服务器配置-suse版」
摘要：如何解决转微信小程序服务器配置-suse版
展开：本文主要内容：1、配置浏览器认可的HTTPS；2、配置wss协议的websocket。一、配置Apache支持HTTPS1、安装openssl1.1、去官网下载http://www.openssl.org/source/，然后安装，具体命令在此不给出1.2、安装完成后,设置path路径，查看是否安装成功：vi/etc/profile在文件末尾加入exportPATH=$PATH:/usr/local/ssl/bin/这句source/etc/profileopensslversion1.3、生成服务器私钥和对应的csr文件opensslreqnewkeyrsa:2048keyoutyourname.keyoutyourname.csr1.4、生成服务器证书opensslx509reqinserver.csroutserver.crtsignkeyserver.keydays3652、Apache启用ssl2.1、在httpd.conf中找到下面两行去掉前面的注释LoadModulessl_modulemodules/mod_ssl.soIncludeconf/extra/httpdssl.conf2.2、配置httpdssl.confSSLCertificateFile/opt/app/apache/conf/server.crtSSLCertificateKeyFile/opt/app/apache/conf/server.key2.3、重启Apacheservicehttpdrestart不过这种方式的证书浏览器一般是不信任的，会出现类似12306那样的警告，解决办法请看第三节。二、配置php版sslwebsocket服务器1、安装libopenssldevel下载网址：http://www.convirture.com/repos/deps/SLES/11.x/x86_64/rpmivhlibopenssldevel.xxx.rpm2、安装swoole，并启用ssl去官网下载最新的安装包：解压然后进入解压目录：tarzxvfswoole.xx.tar.gzphpize启用openssl：./configureenableopensslmakemakeinstall3、启用swoole扩展在php.ini加入：extension=swoole.so4、重启Apache用微信小程序开发工具连接wss即可三、高级安装浏览器认可的证书这个方法可以省去购买证书的钱进入网页：https://www.startssl.com/注册一个账号，然后验证域名然后点击发送验证码，输入验证码即可，然后生成crt文件第一栏输入要生成的证书的子域名，一行一个第二栏输入要服务器生成的csr文件，必须微2048位，然后提交即可生成crt文件下载证书：上传证书到服务器，然后配置httpdssl.conf如下图所示重启Apache即可看到证书被浏览器信任。参考网址：https://www.freehao123.com/startsslssl/四、扩展利用Nginx进行ssl代理转发如果觉得Apache配置openssl麻烦，也可以通过Nginx进行代理转发，不过需要Nginx启用ssl和安装openssl。先从官网下载最新源码,zlib,zlibdevel并安装./configureprefix=/opt/app/nginxwithhttp_ssl_module–withhttp_stub_status_modulewithopenssl=openssl源码路径makemakeinstall配置文件如下：server{listen6443;server_nameapi.wecareinfo.com;ssl_certificate/opt/app/nginx/conf/server.crt;ssl_certificate_key/opt/app/nginx/conf/server.key;ssl_session_cacheshared:SSL:1m;ssl_session_timeout5m;ssl_ciphersHIGH:!aNULL:!MD5;ssl_prefer_server_cipherson;location/{roothtml;indexindex.htmlindex.htm;proxy_passhttp://api.wecareinfo.com;proxy_set_headerHost$host;proxy_set_headerXRealIP$remote_addr;proxy_set_headerXForwardedFor$remote_addr;proxy_http_version1.1;proxy_set_headerUpgrade$http_upgrade;proxy_set_headerConnectionupgrade;}}参考网站：http://codego.net/450201/五、注意事项1、如果编译swoole的时候提示GCC版本过低，可以编辑vi/opt/tools/web/swoolesrc1.8.13stable/swoole_config.h，将以下文件语句屏蔽即可2、编译的时候如果提示找不到openssl，请安装libopenssldevel开发包，安装完后还是提示没有openssl，请先安装完Nginx后再编译安装。3、生成证书的时候，秘钥的位数和申请的时候一定要一致，不然网站会访问不了。4、每次启动ssl需要输入密码，不需要密码的解决办法opensslrsainyourname.keyoutyourname.key.unsecure然后修改httpssl.conf配置文件：SSLCertificateKeyFile/opt/app/apache/conf/yourname.key.unsecure5、查看端口占用：netstatanp|grep95026、微信小程序开发工具连不上websocket的时候，请换个端口，原因未知。原作者：huazai123简书作者出自：http://www.jianshu.com/p/9b3ba3192c87
更多有关转微信小程序服务器配置-suse版的小程序开发问题勤请扫码关注微信公开课小程序参与讨论！

微信公开课小程序热议问题「转微信小程序的样式机制」
摘要：如何解决转微信小程序的样式机制
展开：之前，我已经介绍过在小程序开发中使用WXML来做界面布局，但是WXML只是一个界面的骨架。要让我们的小程序变得精致漂亮高大上起来，就需要一种为其添加样式的机制。小程序的开发框架采用了与Web开发中所使用的CSS层叠样式表几乎相同的一种机制，称作WXSS。WXSS用于描述WXML的组件样式，用于决定WXML的组件应该如何显示。为了适应广大的前端开发者，它被设计为支持CSS中大部分的特性但是注意是大部分，还是有一些特性是不支持的，并且有一些自己的扩展和修改。比如引入了一种新的尺寸单位rpx，还有@import这种外联样式的导入机制话说这个功能不是CSS里也有的么...关于CSS，我就不在这里介绍它的用法了，这个内容实在有点多，还没学习过CSS的朋友可以自己找一下资料学习，我在这里主要想讲解一下WXSS和CSS之间的不同之处。样式的设置在WXML文件中，我们可以通过style和class属性为组件设置样式。不过由于WXML的数据绑定功能的存在，我们就可以动态的设置style和class的属性值了。比如：viewstyle=color:{{color}};padding:{{padding}};Hello/viewviewclass=message{{type}}{{message}}/view不过，我们要尽量避免使用style来设置组件的样式，最好将样式定义成样式规则放到样式文件中(.wxss)，然后通过class属性来设置。因为组件通过style接收动态样式，在运行时会进行解析，影响渲染性能。有限的选择器和CSS不一样，小程序的WXSS支持的选择器的类型有限，官方文档中明确列出说支持的，目前只有以下几种选择器：.class：类选择器，例如.errormsg，它会选择所有class=errormsg的组件id：ID选择器，例如mycontainer，它会选择id=mycontainer的组件element：元素选择器，例如view，它会选择所有view组件element,element：多选择器，例如view,button，它会选择所有view和button组件::after：例如view::after，它会在view组件后面插入内容::before：例如view::after，它会在view组件前面插入内容其实自己试了一些在CSS中可用，小程序官方没有声明在WXSS里支持的选择器，也是可以生效的。但是有些用了就会把微信web开发者工具给整崩溃掉，所以，还是不要在实际开发中使用这类没说支持的选择器了，虽然在有的场景下麻烦了点，但是以上支持了的选择器还是基本够用了。全局样式与局部样式WXSS中有全局样式与局部样式之分。定义在app.wxss文件中的样式为全局样式，将会对每一个页面起作用。而定义为page同名的wxss文件，则称为局部样式，只会针对对应的页面起作用，而且样式优先级比全局样式要高，可以覆盖全局样式。新的尺寸单位最后来说一下WXSS中新增和扩展的尺寸单位，对于做屏幕的自适应是非常有帮助的。rpx(responsivepixel，响应式px)，简单来说，就是不管什么尺寸的设备，总是认为屏幕宽度是750rpxrem(rootem，根em)，也很简单，就是不管什么尺寸的设备，总是认为屏幕的宽度是20rem。所以rpx和rem之间的换算，就是：1rem=(750/20)rpx=37.5rpx设计师的设计稿一般都是按照px来做单位的，那么在开发阶段，开发人员就需要在px和rpx之间进行换算，具体可以如下来计算：rpx=(屏幕实际宽度/750)pxpx=(750/屏幕实际宽度)rpx因此，如果设计师的设计是以iphone6屏幕尺寸为参照(iphone6的屏幕宽度为375px)，则：1rpx=(375/750)px=0.5px1px=(750/375)rpx=2rpx是不是很容易理解好了，关于微信小程序样式WXSS的关键点内容，就讲解到这里，不对的地方欢迎指正。谢谢啦。文／一斤代码简书作者原文链接：http://www.jianshu.com/p/30caa82e55c6
更多有关转微信小程序的样式机制的小程序开发问题勤请扫码关注微信公开课小程序参与讨论！

微信公开课小程序热议问题「转微信小程序的缓存策略分析」
摘要：如何解决转微信小程序的缓存策略分析
展开：文件缓存特性：1.由于小程序的缓存没有时效性2.文件缓存大小限制3.需要针对特定业务群进行缓存更新4.一键清空缓存5.针对不同用户，对应的缓存是公共的，没有隔离。因此缓存针对不同的用户，使用该用户特定的key来隔离。那么对应的解决方案是什么呢解决方案：1.缓存前缀，带上用户标识_缓存名2.每个缓存，需要记录缓存大小、缓存名、缓存类名、缓存生成时间、缓存失效时间到一个公共的缓存类中。3.有一个设置缓存，如果目前系统缓存大小，启动失效缓存清理机制方法。4.当手机网络非常好的情况下，基本上走线上实时数据策略当网络不好，尽量走本地缓存策略。5.为了更好地提高用户体验度，有一个提前加载数据的策略。例如打开首页后2秒，自动加载请求未来用户需要请求的数据，入缓存数据。初步分析的，希望对大家有用缓存策略的好坏，影响到小程序加载的效率和用户体验度缓存，可以在客户端后台，进行静默加载常用的，这样用户在进入第二页，将会加快打开。提高用户体验度。原作者:guoyan2008来自:http://www.henkuai.com/thread1629211.html
更多有关转微信小程序的缓存策略分析的小程序开发问题勤请扫码关注微信公开课小程序参与讨论！

微信公开课小程序热议问题「转用nodejs快速实现微信小程序的websocket服务端」
摘要：如何解决转用nodejs快速实现微信小程序的websocket服务端
展开：摘要:微信小程序服务端使用websocket方式。socket.io已作为nodejs体系中被广泛应用的websocket解决方案，却因socket.io对websocket做了高级封装，不能兼容微信小程序所采用的websocket标准协议无法直接使用，此外微信小程序还要求websocket必须是ssl的。本文着重介绍如何ws库和ssl证书实现微信小程序的websocket服务端。微信小程序对第三方服务端的网络通信方式支持https和Ｗebsocket。WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。为了解决HTTP协议效率低下的问题，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并达到实时通讯。WebSocket在数据传输的稳定性和数据传输量的大小方面，具有很大的性能优势。有不少公司将nodejs的socket.io作为websocket的解决方案，很遗憾的是socket.io是对websocket的封装，并不支持html5原始的websocket协议，微信小程序使用的websocket却是接近于html5原始websocket协议，socket.io居然没有用武之地了。当然情况也没有惨到需要你自己一步一步去实现websocket服务端，我们的大node有很多websocket库，ws就是其中一个，号称最轻量级，最快。ws的用法比较简单，直接看github说明https://github.com/websockets/ws就可以。我这里着重讲的是针对微信小程序实现的加入ssl的websocket实现。要使用ssl，首先你得有ssl证书，生产环境建议你去买一个ssl证书。开发环境你可以给自己生成一个ssl自签名证书临时用一下。这里说下Linux系统怎么通过openssl命令生成证书。首先执行如下命令生成一个keyopensslgenrsades3outssl.key1024然后他会要求你输入这个key文件的密码。不推荐输入。由于生成时候必须输入密码。你可以输入后再删掉。mvssl.keyxxx.keyopensslrsainxxx.keyoutssl.keyrmxxx.key然后根据这个key文件生成证书请求文件opensslreqnewkeyssl.keyoutssl.csr以上命令生成时候要填很多东西一个个看着写吧可以随便，毕竟这是自己生成的证书最后根据这2个文件生成crt证书文件opensslx509reqdays365inssl.csrsignkeyssl.keyoutssl.crt这里365是证书有效期。这个随意。最后使用到的文件是key和crt文件。nodejswebsocket(ssl)服务端实现，wsssample.jsusestrict;varfs=require(fs);//youllprobablyloadconfigurationfromconfigvarcfg={ssl:true,port:8080,ssl_key:ssl.key,ssl_cert:ssl.crt};varhttpServ=(cfg.ssl)require(https):require(http);varWebSocketServer=require(ws).Server;varapp=null;//dummyrequestprocessingvarprocessRequest=function(req,res){res.writeHead(200);res.end(AllglorytoWebSockets! );};if(cfg.ssl){app=httpServ.createServer({//providingserverwithSSLkey/certkey:fs.readFileSync(cfg.ssl_key),cert:fs.readFileSync(cfg.ssl_cert)},processRequest).listen(cfg.port);}else{app=httpServ.createServer(processRequest).listen(cfg.port);}//passingorreferencetowebserversoWSwouldknewportandSSLcapabilitiesvarwss=newWebSocketServer({server:app});wss.on(connection,function(wsConnect){wsConnect.on(message,function(message){console.log(message);wsConnect.send(reply);});});运行这个案例，　你需要先安装ws库。npminstallws运行：nodewsssample.js你可以在浏览器打开https://localhost:8080，在浏览器控制台验证一下websocket是否可以连接：varsocket=newWebSocket(wss://localhost:8080/);socket.onmessage=function(e){console.log(Server:+e.data);};socket.send(yourmessage);如果是在express框架下实现websocket(ssl)。wssexpress.js:usestrictvarfs=require(fs);varhttps=require(https);varserver=https.createServer({key:fs.readFileSync(ssl.key),cert:fs.readFileSync(ssl.crt)});varurl=require(url);varWebSocketServer=require(ws).Server;varwss=newWebSocketServer({server:server});varexpress=require(express);varapp=express();varport=8080;app.use(function(req,res){res.send({msg:hello});});wss.on(connection,functionconnection(ws){varlocation=url.parse(ws.upgradeReq.url,true);//youmightuselocation.query.access_tokentoauthenticateorsharesessions//orws.upgradeReq.headers.cookie(seehttp://stackoverflow.com/a/16395220/151312)ws.on(message,functionincoming(message){console.log(received:%s,message);});ws.send(something);});server.on(request,app);server.listen(port,function(){console.log(Listeningon+server.address().port)});简单的微信小程序websocket服务端实现了。原作者：小水熊
更多有关转用nodejs快速实现微信小程序的websocket服务端的小程序开发问题勤请扫码关注微信公开课小程序参与讨论！

微信公开课小程序热议问题「转设计微信小程序：遵循的五个原则，让你少走弯路的“潜规则”」
摘要：如何解决转设计微信小程序：遵循的五个原则，让你少走弯路的“潜规则”
展开：要理清如何设计微信小程序，首先来弄清楚微信的意图。之前张小龙曾公开过对微信应用号的一些看法，再联系到他总结的微信产品观，大概可以总结出如下重点：1、服务用户，不打扰用户，用完即走微信的一个基本价值观，我们认为一个好的产品是一个用完即走的。一个好的产品不是黏住用户，而是尽量让这个用户离开你的产品。希望用户在用微信的时候，最高效率把必须要做的在微信里面做完，把时间留出来去做很多别的事情。基于微信来做一些项目的时候不妨也多从这个角度思考一下，你做的事情是在帮助用户节约他的时间，提高他的效率。小程序的设计规范里，不允许推送、不允许转发至朋友圈、不允许诱导关注，一而再地强调服务导向，用户主动寻找服务，用完即走。2、服务号未实现目标，小程序予以补充和提升并不太具备存在感的服务号，显然并没有实现微信对它的期望。服务号上线之初，也是希望可以在消息列表中为用户提供更多样化的服务，同时也提供给那些低频工具或商户，一个连接用户提供服务的可能，免除独立开发APP的成本。然而受入口位置、推送频次、交互展示、功能等限制，大部分服务号只不过是企业多了一个消息推送号，并没有拓展出新的领域。3、刺激微信生态微信已经不年轻了。想想微信这几年的发展，曾几何时，摇一摇、群对话、朋友圈、抢红包，几乎包围了我们的生活。然而现在，有多少人关闭了朋友圈提醒有多少人对所有微信群设置了消息免打扰又有多少人，在朋友圈里已经看不到熟悉的人的名字某种意义上，逃离碎片化时间几乎等同于逃离微信。而与此同时，这些年又有大量的第三方应用，通过微信得到了巨大的流量红利，比如脸萌、天天P图、微信群助手、还有各种曾经刷爆朋友圈的H5小游戏，等等。这份蛋糕，微信其实也可以自己吃掉……无论出于防守还是进攻，微信都需要新的突破。小程序实际上是一种众包行为，通过第三方共同塑造一个更完整的微信生态，提供更多新的可能，也提供更多试错，根据用户反馈不断调整策略。微信在设计规范中明确提出不允许开发与现有服务类似的功能，也印证了这一观点。这对微信和第三方来说，都是一种双赢。4、流量变现对于变现，微信一直做得很谨慎。然而开放小程序，使得微信可以较好地保护现有的用户体验，同时又增加出更多向B端实现流量变现的场景5：“潜规则”：开发小程序少走弯路小程序开发并非随心所欲，你需要看懂以下规则才能不走弯路：1、小程序的功能定义与实际提供的服务必须一致；小程序所提供的类目，必须放置在首页，最深也只能放置在二级页面；2、小程序所提供的服务目前暂时不能涉及游戏、直播等服务涉黄涉赌就不用多说了内容也不能涉及测试类内容；比如：算命，抽签，星座运势等；3、小程序所提供的服务可以允许设置付费可见及隐藏可见这点对于开发者来说可以发挥地方很多，具体在后面文章做详细论述；4、小程序不能提供与微信现有功能相似的服务，如含朋友圈、漂流瓶等，也不能提供导航、排行榜、互推的服务；5、小程序一如既往的不支持诱导分享、诱导关注，虚假欺诈等内容，也不支持广告展示比例超过50%的页面内容；6、小程序不得诱导、泄露、转让用户的任何数据。所有行为都必须经过用户授权或有明显提示；小程序这次真的来了，公测的时间比我们想象的要快，这也标志着微信小程序正式走向市场。正如张小龙所提到的，微信不仅仅是一个传播内容平台，更是服务平台，而小程序就是服务平台中最重要的体现。作者:liujia216授权地址：http://blog.csdn.net/liujia216/article/details/53182790
更多有关转设计微信小程序：遵循的五个原则，让你少走弯路的“潜规则”的小程序开发问题勤请扫码关注微信公开课小程序参与讨论！

微信公开课小程序热议问题「轮播图」
摘要：如何解决轮播图
展开：微信小程序能实现类似这种轮播图的功能求解
更多有关轮播图的小程序开发问题勤请扫码关注微信公开课小程序参与讨论！

微信公开课小程序热议问题「软件包1M的问题」
摘要：如何解决软件包1M的问题
展开：小程序正式上线之后软件包的大小还是限制在1M大小
更多有关软件包1M的问题的小程序开发问题勤请扫码关注微信公开课小程序参与讨论！