微信怎么用 微信使用小技巧 微信不为人知的功能_百度知道
微信怎么用 微信使用小技巧 微信不为人知的功能
【微信使用小技巧 一】（拒绝群组消息）：微信群组功能有些类似QQ的群聊功能，这也难怪都是一家公司出品，多少都会有点相似的地方，而微信群组信息推送如何关闭呢？只需点击群组右上角“聊天信息”功能，使用“详细设置”即可关闭“新信息通知”。& & & & & & & & & & & & & & & & & & & &微信群组功能查找聊天记录：对于经常使用微信聊天的朋友来说，聊多了最怕的就是“断章”，如何查找某条特定聊天记录呢？同样先进入聊天信息，然后点击“查找聊天内容”即可搜索查找某条聊天记录。& & & & & & & & & & & & & & & &&微信查找聊天内容如何在群里快速@某人：微博上的@某人，可以让对方快速知道你分享的信息，而为了提高微信群组聊天便捷性，微信群也加入了此功能，在群组聊天时，只需长按某人头像，即可快速@他，让他快速知道你在找他，同时该功能还支持@多人。& & & & & & & & & & & & & & & & &微信群组@他人【微信使用小技巧 二】拒绝朋友圈信息推送：朋友圈作为微信推出的在线互动功能，通过该功能朋友间可以共享一些图片或文字信息，但不是每个人都喜欢关注这些事情，如何关闭一些话唠或喜欢嘚吧没完的人信息呢？在朋友圈中长按TA的头像，即可呼出“设置朋友圈权限”，开启不看他（她）的照片后，你的朋友圈信息中将没有TA最新发的信息，而加入朋友圈黑名单，则你分享的信息，TA将看不到。& & & & & & & & & & & & & & &&微信朋友圈功能朋友圈内发送纯文字：微信朋友圈照片分享功能，大家一定都已熟知，而如何发送纯文字或链接呢？其实长按“相机”按钮，即可切换纯文字发送页面，在此你可发送纯文字或某个链接，分享给你的好友们。& & & & & & & & & & & & & & & & &微信朋友圈发送文字朋友圈单独回复某人或删除信息：直接点击人名即可单独回复他信息，不过，如果你们之间存在相同好友，你的回复会被对方看到，泡熟人的朋友需要注意了，同时朋友圈还支持删除你的信息，只需点击自己发送的信息，即可删除掉已回复的内容。& & & & & & & & & &&朋友圈单独回复某人或删除信息查看当前好友数量：通过设置-功能-群发助手功能，点击开始群发-新建群发，全选即可查看通讯录内到底有多少好友，其统计数字包含了已删除了/拉黑了你的好友。& & & & & & & & & & & & & & & & & & &微信通讯录好友数量统计【微信使用小技巧 三】查看当前微信会话总数与上传聊天记录：通过设置功能内“通用”选项点击“聊天记录迁移”的“上传”功能，系统即会统计当前聊天会话总数，让你一眼就能看出现在到底有多少人在跟你聊天，同时还支持上传保存聊天记录。& & & & & & & & & & & & & & & &微信聊天记录统计同步微信聊天记录：其实这个功能就是“聊天记录迁移”的“下载”功能，通过该功能即可完成聊天记录同步，避免在其他手机上无法查看之前的聊天信息。& & & & & & & & & & & & & & & & & &&微信公众平台管理【微信使用小技巧 四】第三平台信息分享：在使用微信聊天的过程中我们会发现，当你通过“加号”呼出更多功能时，界面会出现更多操作导航，然而最后一个按钮并非某是个功能，而是添加操作，通过该功能你可以添加更多第三方平台工具，例如熟悉的大众点评，团购大全，爱奇艺，墨迹天气等，添加后你可以直接在微信中快速跳转，并且这些软件也都支持微信分享信息。& & & & & & & & & & & & & & & & &微信添加第三方工具独立密码设置：众所周知，微信作为腾讯旗下产品有着很好的兼容性，你只需有QQ号，即可作为微信账户使用，但随之而来的问题就是，当其他人知道你QQ号，又知道你QQ密码的时候，就能轻而易举的查看你的通讯录，这点很容易出现在男女朋友或夫妻间，其实微信在设置我的账号内即提供了“独立密码”设置，方便你设置一个微信专属密码。& & & & & & & & & & & & & & & & & &微信独立密码设置聊天背景更改：经常会在微博上看见某人秀微信，而有时候其内容并没有什么营养，关键是聊天背景却很好玩，怎样改呢？同样在设置功能内“聊天背景”选项，即可更改聊天背景，不仅有固定背景选择，还可以选择相册内照片，或随手拍一张作为背景。& & & & & & & & & & & & & & & & & &微信更改聊天背景夜间免打扰：当你在联网状态，微信会自动在后台接受朋友发来的信息，这点如果在白天还无所谓，但是到了深夜入睡时候再有推送信息，就有点吵人了，对此，微信在设置通用新信息通知内提供了“信息免打扰”设置，通过开启夜间免打扰模式，即便在联网状态下，微信也不会吵你睡觉了。& & & & & & & & & & & & & & & &微信免打扰设置总结：微信是腾讯继QQ产品之后又一款成功的社交型应用产品，其不仅从简单的免费发文字，慢慢到了语音，再到后来的视频功能，每一次的完善也都体现了产品的提升，而其内在的小部件也依然不少，人性化的方面也处处存在，大家可以通过今天小编的这篇文章，看看其中有哪些使用技巧是你不知道。
采纳率：34%
开启不看他（她）的照片后，你的朋友圈信息中将没有TA最新发的信息，而加入朋友圈黑名单，则你分享的信息，TA将看不到，如何关闭一些话唠或喜欢嘚吧没完的人信息呢？在朋友圈中长按TA的头像，即可呼出“设置朋友圈权限”，但不是每个人都喜欢关注这些事情，通过该功能朋友间可以共享一些图片或文字信息朋友圈作为微信推出的在线互动功能
本回答被提问者和网友采纳
不怎么玩微信了
为您推荐：
其他类似问题
小技巧的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。微信小程序入门 - 异步社区
微信小程序入门
第1章　微信小程序入门
微信小程序是腾讯在2016年9月推出的一种新型的微信扩展。尽管目前还没有正式开发，但依然受到了非常多的关注。这主要是由于腾讯的影响力，以及微信在国内拥有的庞大的用户群体。在日，腾讯已经正式上线了小程序，这意味着任何人都可以在手机微信中使用小程序。由于目前小程序的数量还不多，所以现在进入小程序开发领域，可能会赶上小程序的第一拨红利。OK，废话少说，从本章开始，让我们深入了解微信小程序的原理以及详细的开发过程。
什么是微信小程序
注册小程序账号
获取小程序的AppID
设置小程序信息
配置微信小程序的开发环境
微信小程序的结构
开发第一个微信小程序：猜拳游戏
1.1　什么是微信小程序
微信小程序刚一公布，朋友圈就被微信小程序刷爆了！“微信之父”张小龙说：“小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。这也体现了‘用完即走’的理念，用户不关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载”。
我也看了网上的一些关于微信小程序的文章，但内容质量良莠不齐。好吧，我就通过本节让大家了解一下什么是微信小程序，以及微信小程序到底能为我们带来什么。
由于之前有微信公众号，而公众号里面的程序其实就是将移动Web（主要是HTML5、CSS、JavaScript等技术）嵌入到微信中，当然，会调用一些微信提供的API。所以很多人自然而然会想到微信小程序用的也是HTML5。但事实是，微信小程序和HTML5，甚至和Web，没有任何关系。因为Web的性能低下，尤其对于那些追求完美的人，在手机上使用Web简直不能忍受。千万别说，等以后手机性能发展到和现在的PC一样就好了，估计等到那时候，会出现比手机更小巧，当然，性能也更差的设备。如果手机成为了PC，那么这些新出现的设备将会取代现在手机的位置。就像人们永远等待新产品降价再买，但等到这些产品真降价了，又会有更好的产品问世，很难等到既享受新产品，同时又享受低价的时候。
既然说微信小程序和Web一点关系都没有，那么有什么证据呢？这一点从微信小程序官方文档的描述中就可以看出。感兴趣的读者可以通过下面的地址查看微信小程序官方文档。
微信小程序主要由3个全局的文件和一些与页面有关的文件组成，全局文件包括app.js、app.json和app.wxss。其中，app.js是JavaScript文件，用于编写全局的事件，例如微信小程序启动时要执行的代码，类似于iOS工程中AppDelegate.m文件的作用；app.json用于配置微信小程序，例如由哪些页面组成，类似于Android工程中AndroidManifest.xml文件的作用；app.wxss是公共样式表，用于设置整个工程都可以使用的样式，类似于Android中的theme或style资源，全局都可以使用。
可能有人会问，微信小程序不是使用了JavaScript吗？难道和Web没有关系？这里需要明确，JavaScript只是一种语言，未必用在Web上，JavaScript同样可以用在服务端，如Node.js，当然也可以用在移动端，作为独立的语言运行。
微信小程序的页面部分由4个文件组成，这里的页面实际上就是窗口。假设页面名字为index，那么该页面由index.js、index.wxml、index.wxss和index.json组成。index.js用于编写页面的逻辑代码；index.wxml是腾讯自己设计的一种标记语言，可以称为微信标记语言，用于描述UI；index.wxss是针对该页面的样式表，是私有的；index.json是针对页面的配置文件。
这里关键点是index.wxss，用过React Native的读者应该很熟悉JSX，它是一种描述UI的类XML语言。其基本原理是通过XML文件描述UI，并动态创建原生的UI。例如，React Native用View来描述顶层视图，用Text来描述文本输出控件，那么我们可以使用下面的代码来模拟这一动态创建过程。
View component =
if(tag == "View")
component = new ViewGroup(…);
else if(tag == "Text")
component = new TextView(…);
if(tag == "View")
component = [UIView new];
else if(tag == "Text")
component = [UILabel new];
上面描述的是基本的动态创建组件的过程，当然，实际的实现过程要比这个复杂得多，这里只做了原理上的描述。很显然，系统会根据不同平台，以及在JSX中的描述，生成不同的原生组件。
React Native使用的是JSX，类似地，微信小程序使用的是wxml（微信标记语言），它是一种腾讯自己设计的类JSX的语言，下面是wxml的代码示例。
&view class="container"&
bindtap="bindViewTap" class="userinfo"&
&image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"&&/image&
&text class="userinfo-nickname"&{{userInfo.nickName}}&/text&
&view class="usermotto"&
&text class="user-motto"&{{motto}}&/text&
下面则是JSX的代码示例。
&View style={{flex:1}}&
&DrawerLayoutAndroid
ref={drawerLayoutAndroid
=& { this.drawerLayoutAndroid = drawerLayoutA }} drawerWidth={150}
drawerPosition={DrawerLayoutAndroid.positions.left}
renderNavigationView={() =&navigationView}&
&View style={{flex: 1, alignItems:'center'}}&
&Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}&我是主布局内容&/Text&
&/DrawerLayoutAndroid&
&View style={{flexDirection:'row'}}&
&Text style={{flex:1}} onPress={this.onPress.bind(this)}&Open&/Text&
&Text style={{flex:1}}
onPress={()=&this.drawerLayoutAndroid.closeDrawer(0)}&Close&/Text&
从上述的两段代码可以看出，JSX和wxml非常相似，只是具体的组件名称和命名风格不同。例如，JSX所有组件名称首字母都大写（例如Text），而wxml所有组件名称首字母都小写（例如text），此外，组件属性也有一定的差异。
不管JSX和wxml的代码风格是否一样，系统处理它们的原理都是一样的，即根据这些代码自动生成原生的组件，就像前面描述的动态创建原生组件的过程一样。
尽管小程序本身和HTML5无关，但“微信Web开发者工具”（开发小程序的IDE）本身却和HTML5有很大的关系。开发“微信Web开发者工具”的技术是NW.js（node-webkit）,这是一种允许使用HTML5、CSS和JavaScript开发跨平台（Windows、Mac OS X和Linux）桌面应用的框架，和NW.js类似的框架是Electron（Github主导的开源项目），用Electron开发的著名项目包括Atom IDE、Visual Studio Code、WordPress等。也就是说，不管是NW.js，还是Electron，都足够强大，以至于可以开发IDE和很多系统软件。尽管这两个框架都使用了HTML5作为UI描述，但在PC上，HTML5的性能表现良好（毕竟PC的CPU足够强大）。如果读者对使用Web技术开发跨平台桌面应用感兴趣，可以关注我的博客（http://geekori.cn），我会不定期推出相关的技术文章。
1.2　原生热布局
尽管本书的主题是微信小程序，但这里还要提一下原生热布局的概念。由于目前移动平台主要有Android和iOS，但这两个平台使用的开发技术完全不同（前者主要使用Java，后者主要使用OC或Swift），所以就需要有一种可以同时开发两种平台的技术，这样理论上可以节省一半的开发成本。
以前比较流行的技术是混合开发（Hybird），这种技术很简单，就是HTML5+CSS+JavaScript的结合。和木桶原理一样，木桶装多少水，是由最短那个木板决定的，而在这三者组合中，HTML5就成为那个短板，降低了Hybird的整体性能。
对于Hybird技术，我们只需要其中的两个优势：跨平台和热更新。跨平台很好理解，各个平台都会有Web浏览器，而热更新主要是逻辑代码和UI布局的热更新。在逻辑代码方面，热更新用JavaScript，这里主要讨论UI布局的热更新。在Hybird时代，使用的是HTML5和CSS，它们进行热更新没问题，但性能有问题。如果把HTML5组件和原生的组件放到同一个窗口，就可以感觉到它们的不同。所以现在的主要焦点在于UI布局可以实现热更新，性能达到或接近原生组件。HTML5达到了前者的要求，但没有达到后者的要求。我们知道，Android布局使用了Layout，iOS布局使用了storyboard，不管是哪种技术，都不支持热更新，都是固化到apk和ipa文件中的。不过这两种技术都支持动态创建组件，所以React Native率先推出了利用JSX描述组件的位置、尺寸以及其他属性，然后再根据这些属性动态创建本地组件的技术。JSX会生成一种中间状态，我们可以称为虚拟DOM（Virtual DOM），其实就是一种中间组件而已，然后系统会根据运行平台的不同（Android或iOS），将其动态生成不同平台的原生组件，这样很容易实现热更新。因为JSX就是个普通的文本文件，可以很容易地从网络上下载，这一点和HTML5相同。由于组件都是动态创建原生的，所以和在Layout、storyboard中定义的静态原生组件的性能相同，因此，很容易解决前面描述的问题。我们也可以把这种利用XML或其他格式描述UI布局，并实现动态生成原生组件的技术称为原生热布局。
微信小程序借鉴了React Native的原理。不同的是，React Native是通用的，而且可以随意扩展。而微信小程序必须运行在微信提供的架构上，是一种寄生的原生热布局。
除了React Native和微信小程序，还有阿里巴巴的Weex，这是阿里巴巴前端团队发布的一个开源框架，有兴趣的读者可以到http://alibaba.github.io/weex这个地址研究这些框架。也是用了类似Virtual DOM的技术，可以三位一体（Android/iOS/HTML5），React Native对应的React.js可以生产HTML5，微信小程序理论上也可以。希望以后能推出类似的技术，在开发微信小程序的同时，也可以同时开发基于HTML5的微信公众号（目前腾讯推出的最新小程序IDE已经支持类似的功能了，不过功能不算太强）。
通过原生热布局的应用，App的性能完全可以和原生App（其实就是动态生成的原生组件）相媲美，目前已经有很多类似的框架问世，以后可能会更多。相信这些原生热布局的方式会在今后很长一段时间内成为跨平台开发的主流，因为它的“颜值”实在太高了！
1.3　注册小程序账号
在开发小程序之前，需要注册一个小程序账号，并用与账号绑定的手机微信扫描开发工具的二维码才能登录开发小程序的IDE（将在1.4节介绍）。
首先进入如下地址的页面。
如果已经用微信公众号登录，请注销。然后单击右上角“立即注册”链接，进入注册页面。该页面有如图1-1所示的4个注册选项，分别是订阅号、服务号、小程序和企业号。
▲图1-1　注册类型
也就是说，这4个注册类型需要使用4个不同的账号，如果读者已经有了订阅号或其他账号，仍然需要再次注册小程序账号。
现在单击“小程序”选项，系统会让你输入邮箱、密码、验证码等信息，这些都是注册的常规流程，这里不再赘述。然后单击下方的“注册”按钮，系统会发送一封电子邮件到你输入的邮箱中，单击邮件中的链接，会进入填写注册信息页面。目前小程序的账号注册并不对个人开放，只对如图1-2所示的4种类型的组织开放。
▲图1-2　小程序账号支持的组织类型
如果读者有自己的企业，或是为单位注册，可以选择相应的类型。选择其他类型需要相关的资质证明，如果选择企业需要企业营业执照等信息。
在注册的过程中要用企业账户向腾讯官方提供的账号打款0.06元进行验证（要求在10天之内打款，否则验证失败，注意只能是0.06元）。不管验证是否成功，钱款都会退回到原来的企业账户。验证是自动的，但并不是实时的。腾讯的服务端应该是隔一段时间进行一次验证，可能会等几个小时，请耐心等待。
在验证通过之前，仍然可以用注册的邮箱登录小程序后台，但无法获取小程序的AppID。验证通过后，会通过站内短信（在小程序后台右上角）进行通知。要注意的是，登录小程序后台的过程中要使用手机微信扫描二维码进行登录，请用管理员的微信扫描登录小程序后台。
当成功注册小程序账号后，可以进入页面进行登录，登录的过程中需要使用管理员的手机微信扫描二维码。刚登录进入小程序的后台管理页面，会看到如图1-3所示的主页面，左侧是一排功能菜单，单击右下角的“前往发布”可以发布小程序（在本章后续内容中会介绍）。
▲图1-3　小程序后台管理主页面
1.4　获得AppID
尽管开发小程序AppID并不是必须的，但如果要在真机上测试小程序，以及发布小程序，就必须要用到AppID了。这就和Apple的开发者账号一样，如果不花99$/年的费用购买开发者账号，你就只能在iOS模拟器上玩玩了。当然，小程序的AppID是不收费的，只要注册者满足资质，就可以免费注册，并获得AppID。
如果读者按着上一节的步骤成功注册了小程序账号，并登录到小程序后台管理页面。单击左下角的“设置”链接，在右侧单击“开发设置”选项卡，可以看到“开发者ID”列表，第一项“AppID（小程序ID）”后面就是AppID，如图1-4所示。
▲图1-4　AppID
这是我做的一个小程序（极客题库）的AppID，不过就算大家知道了这个AppID也用不了，因为登录时需要用管理员的微信扫描才可以，或者成为该项目的开发者，否则是无法使用别人的AppID的。
1.5　设置小程序信息
即使有了AppID，也不能立即发布小程序，在此之前，还需要设置小程序的基本信息。单击“设置”链接，在右侧单击“基本设置”，会出现一些设置项，如小程序名称、小程序头像等。设置完成后，会出现类似图1-5所示的信息。
▲图1-5　小程序基本设置
当小程序发布后，如果想让别人使用你的小程序，最简单的方式就是提供小程序的二维码。单击图1-5所示页面“二维码”右侧的“下载更多尺寸”，可以下载不同尺寸的二维码。图1-6是“极客题库”的二维码，大家可以扫一扫，看看能不能运行小程序。
▲图1-6 “极客题库”小程序二维码
1.6　开发第一个微信小程序
本节将从零开始开发一款微信小程序。该程序是一个猜拳游戏，功能很简单，单击“开始”按钮后，会快速切换“锤子”“剪刀”和“布”，直到按“停止”按钮，会显示“锤子”“剪刀”和“布”中的一个，该游戏可以实现双方或多方猜拳。本节的目的是通过该例子，将开发微信小程序的过程完整讲述一遍，从配置开发环境、建立小程序项目，一直到将微信小程序发布到微信平台，并在真机上测试为止。通过该例子，读者可以掌握微信小程序的开发流程。
1.6.1　配置开发环境
腾讯在推出微信小程序的同时，也推出了自己的开发工具，读者可以到下面的地址中下载该开发工具的最新版本。
这套开发工具目前支持Windows32位、Windows64位以及Mac OS X系统，读者需要根据自己使用的OS下载合适的版本。本书主要使用Mac OS X版本进行讲解，Windows版本和Mac OS X大同小异，并不影响读者阅读本书的内容。
运行微信小程序IDE后，会看到如图1-7所示的窗口。
▲图1-7　扫描二维码进入IDE
进入手机微信，扫描该二维码（需要管理员微信账号才可以正常登录），就会自动登录，并进入如图1-8所示的窗口。
▲图1-8　微信开发者工具
目前该工具同时支持开发小程序和公众号网页开发，由于本书主要讲解小程序开发，所以读者要选择第一项“本地小程序项目”，进入如图1-9所示的窗口。
▲图1-9　微信小程序IDE建立项目窗口
读者如果第一次使用该IDE，可以单击“添加项目”，新建一个小程序项目，图1-9所示的列表是已经建立的小程序项目。
1.6.2　建立小程序项目
单击“添加项目”后，会看到如图1-10所示的页面。
▲图1-10　新建小程序项目
进入如图1-10所示的新建项目窗口后，如果读者有小程序的AppID，可以直接在AppID中输入。如果没有，单击“无AppID”，也可以开发小程序，只是无法在真机上测试，也无法发布，但可以在本地运行。最后按图1-11所示输入项目名称和项目目录。
▲图1-11　输入小程序工程信息
单击“添加项目”按钮后，会创建新的小程序项目，开发主界面如图1-12所示。下一节我们会在这个项目中开发第一个小程序，并介绍该开发界面的主要组成部分。
▲图1-12　微信小程序开发主界面
1.6.3　猜拳游戏的布局
进入小程序IDE，单击IDE左上角的“编辑”选项（如图1-13所示），开始编辑代码。
猜拳游戏的布局非常简单，如图1-14所示。
▲图1-13　IDE左上角的控制选项
▲图1-14　猜拳游戏的布局样式
猜拳游戏的布局是纵向显示了3个组件：文本组件（text）、图像组件（image）和按钮组件（button）。在创建小程序工程时，默认建立了两个页面：index和logs，如图1-15所示。我们不需要考虑logs，在这个例子中只修改和index页面相关的文件。index是小程序第一个显示的页面。
▲图1-15　index和logs页面的文件结构
其中，index.wxml文件是index页面的布局文件，现在打开该文件，并按下面的内容修改代码。
&!--index.wxml--&
&view class="container"&
&text class="finger_guessing"&猜拳游戏&/text&
class="userinfo"&
&image class="userinfo-avatar" src="{{imagePath}}" background-size="cover"/&
&button bindtap="guess"&{{title}}&/button&
在这段代码中，image和button组件的内容都需要动态改变，所以image组件的src属性和button组件的文本值（夹在&button&和&/button&之间的部分）都分别与一个变量绑定。这是小程序的一个重要特性（和React Native完全相同）。在改变组件的属性值时，并不需要直接获取该组件的实例，而只需将该属性与某个同类型的变量绑定，一旦该变量的值改变，属性值也就会随之改变了。绑定变量的格式是“{{变量名}}”。改变了的定义和初始化部分，在下一节会详细介绍。
我们发现，就算按前面的布局，仍然不能像图1-14所示那样摆放组件，这是因为还需要调整下面代码的样式（index.wxss文件）。
/**index.wxss**/
.userinfo {
flex-direction:
align-items:
margin-top: 50
.userinfo-avatar {
width: 500
height: 500
margin: 40
.userinfo-nickname {
.finger_guessing {
color: #F00;
font-size: 30
margin-top: 20
前面的布局代码主要调整了userinfo-avatar的宽度和高度，让图像显示得更大一些。
最后，还需要修改app.wxss文件的代码，将padding属性的值改成50rpx 0，代码如下：
/**app.wxss**/
.container {
height: 100%;
flex-direction:
align-items:
justify-content: space-
padding: 50rpx 0;
box-sizing: border-
当然，现在可能仍然无法显示图像，因为还没有设置imagePath变量，而且还没有把图像放到工程目录中。现在读者可以到网上找3张图片，分别是剪子、石头和布，当然，也可以用本例提供的图像，并在小程序工程根目录建立一个images目录，将这3个图像文件放到该目录中。
1.6.4　控制剪子、石头、布的快速切换
猜拳游戏的核心就是快速切换剪子、石头、布3个图像，当单击“停止”按钮后，会停到其中一个图像上。这里涉及到如下两个动作：
用定时器快速切换图像。
当一开始单击图像下方的按钮时，文本变成了“停止”，当再次单击该按钮后，按钮文本又变成了“开始”，也就是说，一个按钮同时负责开始和停止图像快速切换两个动作。
控制图像快速切换和按钮文本变化两个动作的代码都要写在index.js文件中。首先会将这3个图像文件名存储在一个全局的数组中，并使用定时器快速从这个数组中依次循环获取图像文件名，并将该文件名指定的图像显示到image组件中。修改按钮的文本只需要修改title变量即可。
这里涉及到两个主要变量：imagePath和title。这两个都定义在data对象中，单击按钮会执行guess函数（在index.wxml文件中使用bindtap属性指定按钮的单击事件函数名），该函数也需要在index.js中编写。完整的实现代码如下：
//index.js
//获取应用实例
var app = getApp()
在数组中存在三个图像文件名
var imagePaths = ['../../images/scissors.png', '../../images/stone.png', '../../images/cloth.png'];
当前图像的索引
var imageIndex = 0;
imagePath: imagePaths[0],
用于修改image组件显示图像的变量
title: '开始',
用于改变按钮文本的变量
isRunning:false,
该变量为true，表示图像正在快速切换
userInfo: {},
//事件处理函数
bindViewTap: function () {
wx.navigateTo({
url: '../logs/logs'
定时器要执行的函数
change: function (e) {
imageIndex++;
当前图像索引大于最大索引时，重新设为第一个索引值（已达到循环显示图像的目的）
if (imageIndex & 2) {
imageIndex = 0;
修改image组件要显示的图像（改变imagePath变量的值）
this.setData(
imagePath: imagePaths[imageIndex]
单击按钮要执行的函数——单击要执行的函数按钮
guess: function (e) {
获取isRunning变量的值
let isRunning = this.data.isR
// 根据是否正在快速切换图像，决定如何修改按钮文本，以及是开启定时器，还是移除定时器
if (!isRunning) {
this.setData(
title: '停止',
isRunning:true
开启定时器（没100毫秒调用一次change函数）
this.timer = setInterval((function () {
this.change()
}).bind(this), 100);
this.setData(
title: '开始',
isRunning:false
移除定时器
this.timer && clearInterval(this.timer);
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function (userInfo) {
//更新数据
that.setData({
userInfo: userInfo
至此，猜拳游戏的代码已全部介绍完毕，现在可以通过左侧的模拟器测试我们的成果了。大家可以单击“开始”按钮，看看图像是否会快速切换，再单击“停止”按钮，看看是否会停止在某个图像上。
1.6.5　真机测试小程序
现在轮到用真机测试我们的成果了。如果只想在真机上测试，可以用管理员微信登录小程序IDE。
现在单击IDE左上角的“项目”选项，右侧会显示如图1-16所示的项目操作页面。
▲图1-16　项目操作页面
单击“预览”按钮，会显示如图1-17所示的二维码窗口，用管理员的微信扫描该二维码，即可将小程序上传到真机上运行。
在真机（Android手机）上的测试结果如图1-18所示。
▲图1-17　扫描二维码上传小程序到真机
▲图1-18　在真机上的测试结果
1.6.6　真机调试小程序
如果在模拟器上开发小程序，很容易在Console中查看调试信息，但如果在真机上运行呢？其实也有办法查看调试信息。现在按着前面讲解步骤在真机上运行小程序，然后单击右上角的省略号（…）菜单，会弹出如图1-19所示的菜单。
单击“打开调试”菜单项，这时当前小程序需要关闭，然后重新进入。这时会看到右下角有一个绿色的“vConsole”按钮，如图1-20所示。
▲图1-19　功能菜单
▲图1-20　vConsole按钮
单击“vConsole”按钮，就会打开真机上的Console，并显示调试信息，如图1-21所示。关闭Console，执行同样的操作即可。
▲图1-21　真机上的Console
1.6.7　上传和审核小程序
如果在真机上测试没问题，那么可以单击图1-16所示的“上传”按钮将小程序上传到腾讯的服务器。单击“上传”按钮后，也会显示一个类似图1-17的二维码窗口，用管理员的微信扫描该二维码，然后会显示如图1-22所示的窗口，输入相应的版本号和项目备注，最后单击“上传”按钮上传即可。
▲图1-22　完成最后的上传设置工作
成功上传小程序后，回到小程序的后台，单击左侧的“开发管理”选项，会看到如图1-23所示的3个小程序版本的管理页面。我们直接上传的是开发版本，如果管理员认为没问题，可以单击“提交审核”按钮，将小程序提交给腾讯，这就是审核版本。如果腾讯审核通过正式上线了，这就是线上版本。读者也可以单击“提交审核”按钮右侧的向下箭头按钮，并单击“删除”按钮删除当前开发版本。要注意的是，下一次上传的版本会覆盖当前的开发版本。
▲图1-23　管理小程序的版本
本章用一个完整的例子从头到尾演示了从开发小程序到真机测试，再到上传发布的完整过程。尽管本章提供的例子非常简单，但足以清楚地展示小程序开发的完整过程。不过要想开发更加高级的小程序，还需要继续阅读后续的章节。
如果读者想了解完整的小程序账号注册、开发以及使用第三方发布的小程序的完整过程，可以观看我的视频课程：http://edu.csdn.net/course/detail/3371。
视图层技术
多媒体组件
徽章（Badge）
高仿计算器