匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。微信小程序怎么玩 微信小程序怎么用玩法介绍
时间： 16:12:19来源：作者：佚名(0)
日，是一个值得载入互联网史册的日子。这一天，零点刚过，张小龙和他的团队，在夜色笼罩下，正式发布了微信小程序。
所以，从这一刻开始，只要有开发者登录小程序后台，并在「开发管理」页面点击了「发布」按钮，就会有一个小程序，降临到这个世界上。而微信小程序，这个设定为「无处不在」的产品，切切实实地「在」你身边了，并即将给你的生活带来新的变化。那么，小程序到底是什么？小程序的入口在哪里？小程序到底如何使用？该去哪里找小程序呢？现在，知晓程序（微信号zxcx0101）就立刻为大家揭晓。小程序上线，你需要知道什么？小程序是什么？小程序是一种无需安装，即可使用的手机「应用」。只需要扫描二维码，或是搜一搜，就能立即使用。不同的小程序，能帮你实现不同的功能。例如，买电影票、餐厅排号、餐馆点菜、查询公交、查询股票信息、查询天气、收听电台、预定酒店、共享单车、打车、查汇率、查单词、买机票、网购……当然，作为微信的新产品，小程序只能在微信里使用。去哪里找到小程序？去哪里能找到这些小程序呢？就像关注微信公众号一样，你得知道它的名字，或者二维码，才能使用一款小程序。可是，微信里并没有提供一个集中展示小程序的地方。要是想迅速找到大量有趣、实用的小程序，你可以去国内首家，里面聚集了非常多的优质小程序，包括了腾讯、网易、去哪儿、丁香园等公司的作品。在上面，你也能立刻用上玩物志、解忧室、荔枝FM 播客、轻芒杂志、好奇心日报等高品质的小程序。那么，如何进入小程序商店呢？有两种方式：在浏览器中打开。在所关注的微信号后台，点击菜单栏的「程序商店」。现在，就不如去逛逛小程序商店，品尝小程序的头啖汤吧。友情提示：微信版本需要更新至6.5.3，才能使用小程序哦。使用小程序，你还需要知道这些1. 发现页面入口在小程序还未发布之前，就有消息泄露，发现页面将会有一个小程序的入口。这个入口确实存在！不过，只有在微信上使用过小程序，才能「解锁」发现页面的那个入口。如果你还没有使用过任何小程序，现在在微信首页的搜索框搜索「解忧室」，点击解忧室的小程序，发现页面的入口就会显现出来。现在打开微信，点击底部的「发现」按钮，你会发现，页面中多了一栏图标为S型的「小程序了，点击即可进入小程序页面。那些你曾用过的小程序，就集中出现在这个页面中。在小程序页面的顶部，还有一个搜索框。在搜索框内输入已发布的小程序名称，就能搜到相应的小程序。2. 微信公众号入口如果一个微信公众号关联了自己的小程序。那么，在公众号的介绍页面，就会出现一个相关小程序的模块。只要点击小程序的名字，就能立即打开使用。3. 小程序的二维码小程序的二维码跟微信公众号的二维码是不一样的。目前，小程序的二维码不支持在微信中长按识别，只能通过微信扫一扫，才能开启小程序。所以，要是谁传给你一张小程序的二维码，按老方法长按识别，可是打不开的哦。4. 小程序如何分享？要是你用上一款不错的小程序，想分享给朋友，有些东西还需要注意。小程序跟公众号不一样，它不能分享到朋友圈，只能分享给好友，或者是微信群。不过，小程序的分享效果和体验都非常棒，强烈建议你试试。5. 小程序和聊天两不误在微信里聊天，在微信里看公众号内容，是两件无法同时进行的事。这一点，让很多人都深感麻烦。好在，在使用小程序的时候，完全不需要担心这一点。只要点击小程序右上角的「???」，再点击「显示在聊天顶部」，小程序就会出现在微信首页的上方。聊完天，点一下小程序的名字，就能回到小程序的页面了。6. Android的特权如果你是Android用户，还可以享受一个特权：把小程序添加到桌面。在小程序右上角点击三个点，即可看到「添加到桌面」的选项，点击即可直接将小程序添加到桌面。你会看到桌面多出了一个小程序的图标。之后如果你想启动这个小程序，从桌面点击图标直接启动就可以了。一个谜底的解开：为什么是1月9日？就在1月9日刚到不久，张小龙发了一条朋友圈。朋友圈的内容是6张图片：16171人阅读
WEB Hack（9）
「微信小程序」的开发框架体验起来，还不错——自带了UI框架。但是问题是他的IDE，表现起来相当的糟糕——其实主要是因为，我当时买WebStorm License买了好多年。所以，我觉得他的IDE真不如我这个付费好用。
而且，作为一个拥护自由和开源的 「GitHub 中国区首席Markdown程序员」。微信在「微信小程序」引导着Web开向封闭，我们再也不能愉快地分享我们的代码了。
如果我们放任下去，未来的Web世界令人堪忧。
好了，废话说完了：
文章太长不想看，可以直接看Demo哈哈：
真实世界下的MINA三基本元素
「微信小程序」的背后运行的是一个名为MINA框架。在之前的几篇文章里，我们介绍得差不多了。现在让我们来作介绍pipeline：
Transform wxml和wxss
当我们修改完WXML、WXSS的时候，我们需要重新编译项目才能在浏览器上看到效果。这时候后台就会执行一些transform动作：
wcc来转换wxml为一个genrateFun，执行这个方法将会得到一个virtual dom
wxss就会转换wxss为css——这一点有待商榷。
wcc和wxss，可以从vendor目录下获取到，在“微信web开发者工具”下敲入help，你就会得到下面的东东：
运行openVendor()，你就会得到上面的wcss、wxss、WAService.js、WAWebview.js四个文件了。
Transform js文件
对于js文件来说，则是一个拼装的过程，如下是我们的app.js文件：
onLaunch: function () { }
它在转换后会变成：
define("app.js", function(require, module){var window={Math:Math},location,document,navigator,self,localStorage,history,C
onLaunch: function () {
require("app.js");
我假装你已经知道这是什么了，反正我也不想、也不会解释了~~。同理于：
define("pages/index/index.js", function(require, module){var window={Math:Math},location,document,navigator,self,localStorage,history,C
text: initData
require("pages/index/index.js");
至于它是如何replace或者apend到html中，我就不作解释了。
MINA如何运行？
为了运行一个Page，我们需要有一个virtual dom，即用wcc转换后的函数，如：
var $gaic={}
$gwx=function(path,global){
function _(a,b){b&&a.children.push(b);}
function _n(tag){$gwxc++;if($gwxc&=16000){throw 'enough, dom limit exceeded, you don\'t do stupid things, do you?'};return {tag:tag.substr(0,3)=='wx-'?tag:'wx-'+tag,attr:{},children:[]}}
function _s(scope,env,key){return typeof(scope[key])!='undefined'?scope[key]:env[key]}
function _wl(tname){console.warn('template `' + tname + '` is being call recursively, will be stop.')}
function _ai(i,p,e,me){var x=_grp(p,e,me);if(x)i.push(x);else{console.warn('path `'+p+'` not found from `'+me+'`')}}
function _grp(p,e,me){if(p[0]!='/'){var mepart=me.split('/');mepart.pop();var ppart=p.split('/');for(var i=0;i&ppart.i++){if( ppart[i]=='..')mepart.pop();else if(!ppart[i])continue;else mepart.push(ppart[i]);}p=mepart.join('/');}if(me[0]=='.'&&p[0]=='/')p='.'+p;if(e[p])returnif(e[p+'.wxml'])return p+'.wxml';}
然后在我们的html中加一个script，如
document.dispatchEvent(new CustomEvent("generateFuncReady", {
generateFunc: $gwx('index.wxml')
就会凑发这个事件了。我简单的拆分了WXWebview.js得到了几个功能组件：
define.js，这里就是定义AMD模块化的地方
exparser.js，用于转换WXML标签到HTML标签
exparser-behvaior.js，定义不同标签的一些行为
mobile.js，应该是一个事件库，好像我并不关心。
page.js，核心代码，即Page、App的定义所在。
report.js，你所说的一切都能够用作为你的呈堂证供。
virtual_dom.js，一个virtual dom实现结合wcc使用，里面应该还有component.css，也可能是叫weui
wa-wx.js，定义微信各种API以及WebView和Native的地方，和下面的WX有冲突。
wx.js，同上，但是略有不同。
wxJSBridge.js，Weixin JS Bridge
于是，我就用上面的组件来定义不同的位置好了。当我们触发自定义的generateFuncReady事件时，将由virtual_dom.js来接管这次Render：
document.addEventListener("generateFuncReady", function (e) {
var generateFunc = e.detail.generateF
wx.onAppDataChange && generateFunc && wx.onAppDataChange(function (e) {
var i = generateFunc((0, d.getData)());
if (i.tag = "body", e.options && e.options.firstRender){
e.ext && ("undefined" != typeof e.ext.webviewId && (window.__webviewId__ = e.ext.webviewId), "undefined" != typeof e.ext.downloadDomain && (window.__downloadDomain__ = e.ext.downloadDomain)), v = f(i, !0), b = v.render(), b.replaceDocumentElement(document.body), setTimeout(function () {
wx.publishPageEvent(p, {}), r("firstRenderTime", n, Date.now()), wx.initReady && wx.initReady()
var o = f(i, !1), a = v.diff(o);
a.apply(b), v = o, document.dispatchEvent(new CustomEvent("pageReRender", {}));
因此，这里就是负责DOM初始化的地方了，这里得到的Dom结果是这样的：
class="btn-area"&
class="body-view"&
& style="display:"&&&&&
&add line&
&remove line&
而我们写的wxml是这样的：
class="btn-area"&
class="body-view"&
&{{text}}&
bindtap="add"&add line&
bindtap="remove"&remove line&
很明显view会被转换为wx-view，text会被转换为wx-text等等，以此类推。这个转换是在virtual dom.js中调用的，调用的方法就是exparser。
遗憾的是我现在困在 data初始化上面了~~，这里面有两套不同的事件系统，有一些困扰。其中有一个是：WeixinJSBridge、还有一个是app engine中的事件系统，两个好像不能互调。。。
使用WebStorm开发
在浏览器上运行之前，我们需要简单的mock一些方法，如：
window.webkit.messageHandlers.invokeHandler.postMessage
window.webkit.messageHandlers.publishHandler.postMessage
WeixinJSCore.publishHandler
WeixinJSCore..invokeHandler
然后把 config.json中的一些内容变成__wxConfig，如：
__wxConfig = {
"debug": true,
"pages": ["index"],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
"projectConfig": {
"appserviceConfig": {
"appname": "fdfafafafafafafa",
"appid": "touristappid",
"apphash": ,
"isTourist": true,
"userInfo": {}
如这里我们的appname是哈哈哈哈哈哈哈——我家在福建。
然后在我们的html中引入各个js文件，啦啦。
我们还需要一个自动化的glup脚本来watch wxml和wxss的修改，然后编译，如：
exec('./vendor/wcc -d ' + inputPath + ' & ' + outputFileName, function(err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
说了这么多，你还不如去看代码好了：
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1166464次
积分：14369
积分：14369
排名：第916名
原创：258篇
评论：727条
书名：《全栈应用开发：精益实践》
网上购买：
书名：《自己动手设计物联网》
网上购买：
《物联网实战指南》机械工业出版社
分享及时有趣的内容
文章：10篇
阅读：18795
阅读：23074
文章：10篇
阅读：93178
阅读：43472
阅读：75767
文章：12篇
阅读：92458
(1)(1)(2)(1)(2)(1)(1)(1)(1)(1)(4)(2)(4)(2)(5)(3)(3)(3)(2)(4)(1)(3)(1)(2)(2)(1)(2)(1)(2)(2)(1)(4)(13)(4)(6)(5)(13)(6)(8)(18)(26)(6)(2)(2)(14)(11)(4)(2)(3)(10)(11)(1)(2)(9)(10)(1)(3)(1)(1)(1)}