微信小程序怎么用及效果演示

小程序是一种无需安装，即可使用的手机「应用」。只需要扫描二维码，或是搜一搜，就能立即使用。下面是我收集整理的微信小程序的用法及效果演示，欢迎阅读。

微信小程序的用法及效果演示

2017 年 1 月 9 日，是一个值得载入互联网史册的日子。

这一天，零点刚过，张小龙和他的团队，在夜色笼罩下，正式发布了微信小程序。

所以，从这一刻开始，只要有开发者登录小程序后台，并在「开发管理」页面点击了「发布」按钮，就会有一个小程序，降临到这个世界上。

而微信小程序，这个设定为「无处不在」的产品，切切实实地「在」你身边了，并即将给你的生活带来新的变化。

那么，小程序到底是什么?小程序的入口在哪里?小程序到底如何使用?该去哪里找小程序呢?

小程序是什么?

小程序是一种无需安装，即可使用的手机「应用」。只需要扫描二维码，或是搜一搜，就能立即使用。

不同的小程序，能帮你实现不同的功能。

例如，买电影票、餐厅排号、餐馆点菜、查询公交、查询股票信息、查询天气、收听电台、预定酒店、共享单车、打车、查汇率、查单词、买机票、网购……

当然，作为微信的新产品，小程序只能在微信里使用。

去哪里找到小程序?

去哪里能找到这些小程序呢?

就像关注微信公众号一样，你得知道它的名字，或者二维码，才能使用一款小程序。

可是，微信里并没有提供一个集中展示小程序的地方。

要是想迅速找到大量有趣、实用的小程序，你可以去国内首家小程序商店(minapp.com)，里面聚集了非常多的优质小程序，包括了腾讯、网易、去哪儿、丁香园等公司的作品。

在上面，你也能立刻用上玩物志、解忧室、荔枝 FM 播客、轻芒杂志、好奇心日报等高品质的小程序。

那么，如何进入小程序商店呢?有两种方式：

在浏览器中打开 minapp.com。

在知晓程序(微信号 zxcx0101)后台，点击菜单栏的「程序商店」。

现在，就不如去逛逛小程序商店，品尝小程序的头啖汤吧。

友情提示：微信版本需要更新至 6.5.3，才能使用小程序哦。

使用小程序，你还需要知道这些

1. 发现页面入口

在小程序还未发布之前，就有消息泄露，发现页面将会有一个小程序的入口。

这个入口确实存在!

不过，只有在微信上使用过小程序，才能「解锁」发现页面的那个入口。

如果你还没有使用过任何小程序，现在在微信首页的搜索框搜索「解忧室」，点击解忧室的.小程序，发现页面的入口就会显现出来。

现在打开微信，点击底部的「发现」按钮，你会发现，页面中多了一栏图标为 S 型的「小程序了，点击即可进入小程序页面。

那些你曾用过的小程序，就集中出现在这个页面中。

在小程序页面的顶部，还有一个搜索框。在搜索框内输入已发布的小程序名称，就能搜到相应的小程序。

2. 微信公众号入口

如果一个微信公众号关联了自己的小程序。那么，在公众号的介绍页面，就会出现一个相关小程序的模块。

只要点击小程序的名字，就能立即打开使用。

3. 小程序的二维码

小程序的二维码跟微信公众号的二维码是不一样的。

目前，小程序的二维码不支持在微信中长按识别，只能通过微信扫一扫，才能开启小程序。

所以，要是谁传给你一张小程序的二维码，按老方法长按识别，可是打不开的哦。

4. 小程序如何分享?

要是你用上一款不错的小程序，想分享给朋友，有些东西还需要注意。

小程序跟公众号不一样，它不能分享到朋友圈，只能分享给好友，或者是微信群。

不过，小程序的分享效果和体验都非常棒，强烈建议你试试。

5. 小程序和聊天两不误

在微信里聊天，在微信里看公众号内容，是两件无法同时进行的事。这一点，让很多人都深感麻烦。

好在，在使用小程序的时候，完全不需要担心这一点。

只要点击小程序右上角的「···」，再点击「显示在聊天顶部」，小程序就会出现在微信首页的上方。

聊完天，点一下小程序的名字，就能回到小程序的页面了。

6. Android 的特权

如果你是 Android 用户，还可以享受一个特权：把小程序添加到桌面。

在小程序右上角点击三个点，即可看到「添加到桌面」的选项，点击即可直接将小程序添加到桌面。

你会看到桌面多出了一个小程序的图标。之后如果你想启动这个小程序，从桌面点击图标直接启动就可以了。

相关文章：

下图是小程序 小米Lite 的 Tab 切换效果：切换 Page 时，Tab 下方的指示器（红色横条）是没有滚动效果而是直接闪现到下一个 Page 的，这也是市面上小程序常见的 Tab 切换效果。

原生端 TabLayout 常见的功能就是我们的目标效果，所以 目标效果 如下：

通过了解小程序组件及技术支持，选定通过 scroll-view 、swiper 、swiper-item 、movable-area 、movable-view 配合 插槽 和 抽象节点 来实现自定义组件 tab-layout 。

具体如下图所示 ：

主要实现（点击跳转查看源码）

1.复制 tab-layout 组件到项目中 （点击跳转至源码 TabLayout 目录）

4.在布局文件中使用 TabLayout 组件，并通过抽象节点 generic:item-tab 和 generic:item-page 分别与自定义的 Tab 和 Page 绑定

5.使用自定义属性 indexAreaHeight 为 Index 及其活动区域设置高度

6.使用自定义属性 tabList 设置数据源，根据数据源将自动生成对应数量的 Tab 和 Page

7.按需选择可采用插槽 slot = "index" 或自定义属性 indexStyle 设置 Index 的样式

布局文件 index.wxml 中：

样式文件 index.wxss 中

布局文件 index.wxml 中

PS： 还有一个很重要的方法 onPageUpdata ，用于抽象节点 item-tab 和 item-page 通知父节点 tab-layout 刷新数据，在子控件中通过 this.triggerEvent("updata") 触发

可能出现问题：

1. 当 item-page 中存在竖直滚动的 scroll-view 时出现滑动冲突该如何解决？

在 item-page 组件 attached 方法中按需为 scroll-view 设置固定高度或占满屏幕剩余位置 （点击跳转查看参考写法）

2.当 item-page 或 item-tab 中调用 this.setData ( ) 之后，发现自定义属性 item 获取值为 null ?

出现该种情况，应在 this.setData ( ) 之后，执行 this.triggerEvent("updata") 触发 tab-layout 的 onPageUpdata 方法重新得到 item 值

3.如何实现 " 懒加载 " ，即当 Tab 首次被选中时，才进行对应 Page 的数据加载？

为自定义组件 item-page 设置一个懒加载标志位暂定为 isLoadData ，通过订阅自定义属性 currentIndex ，在 currentIndex 属性变化或组件进行到 attached 生命周期时，通过判断 isLoadData 和 currentIndex 是否与 position 相等来进行数据加载并调整标志位 （点击跳转查看参考写法）

在小程序越来越普及的现状下，如何使得小程序能给用户带来更完善的显示效果和使用体验，是每一个开发者都应该力尽其责的事。鉴于本人当前对小程序和网页端的熟悉程度，该组件或许还存在很多瑕疵，如有更好的见解或建议，欢迎留言。

1、可以使用微信开发者工具，它可以实现一边编辑代码一边看效果图的功能，可以模拟真实的小程序运行环境，实时预览小程序的效果。

2、可以使用微信小程序的实时预览功能，可以实时预览小程序的效果，可以在预览窗口中查看小程序的运行状态，以及实时编辑代码的变化。

3、可以使用微信小程序的调试功能，可以实时调试小程序的代码，可以查看小程序的运行状态，以及实时编辑代码的变化。

---