【www.shanpow.com--工作总结】
篇一:[小程序示例][微信小程序]微信小程序知识总结及案例集锦
目录
主要从以下几个方面给大家总结一下微信小程序相关的知识!
1 前言
2.什么是小程序?
3.微信小程序在微信开发中的位置?
4.微信小程序框架–MINA
5.现代化前端技巧
6.MINA 是不是 HTML 5
7.小程序与传统APP区别
8.小程序为开发者提供了什么?
9.微信小程序源码结构
10.MINA 组件
11.微信小程序案例
12.公众号
1.前言
今天把之前收集的微信小程序案例,给大家共享出来,一起学习!学习的别人东西是自己技能增长最快的一种方式.
就像之前我们在写程序时,主管或项目经理,经常提醒我们一样,程序写的太乱,不简洁,要多看别人写的好的的程序源码,看多了,模仿多了,自己写代码结构和性能就提高很多了.
回归正题,今天着重给大家15个微信小程序案例,需要的可以下载看看!首先在介绍源码之前,还是给大家讲讲微信小程序相关的知识.
2.什么是小程序?
小程序是微信推出的一种新的公众号的形态
不需要下载安装即可在微信中使用的应用
小程序、订阅号、服务号、企业号是并行的体系
3.微信小程序在微信开发中的位置?
4.微信小程序框架–MINA
小程序融合了很多前端开发界的概念，但是并没有采用任何一个框架，包括流行的REACT、VUE，还有CORDOVA。它不是三者中的任意一个，而是拼凑出一个新的框架。
尽可能简单、高效的方式让开发者可以在微信中开发
具有原生 APP 体验的服务
5.现代化前端技巧
Virtual DOM：开发者写 iOS 和原生的 h5 应用的时候，很多时候是手动地去操作 UI，用户按按钮之后改变页面。当应用很复杂的时候在改变的过程可能就会产生错误，Virtual DOM每次要去改变一个界面的时候，重新把界面做一次再进行修改，避免出错。
MVVM：分离逻辑和数据。
组件化：功能、风格模块化，每个风格封装在组件里就不会泄露。
6.MINA 是不是 HTML 5
微信小程序一出来，大家都在猜测是基于什么技术，是 H5 还是原生。它的框架看起来既像 H5，又像原生。小程序写的是 H5 代码，但是它又不遵从 H5 的标准写法。它很多方面借用了 Web 技术，但很多细节又不一样。
1.非标准标签（组件）
我们知道写浏览器用的都是标准的主键，但是在 MINA 里面，小程序自成一个体系，虽然后台还是一样用浏览器的主键去实现的，但是在前面写 HTML 的时候加上它自己的一套标准。
2.非标准CSS：
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.
3.非标准事件系统：
当按下一个按钮的时候分配一个事件，这个事件也是非标准的，但是跟非标准很像。包括冒泡阶段和捕捉阶段。
4.非标准 JS API：
支持微信的接口，但是没有任何标准 JS接口。
5.不能操作 document 或者 DOM：
虽然是在浏览器里面运行，但是不能操作浏览器本身，不能操作原生文件本身，只能用Virtual DOM 去改变页面。
6.有些组件有奇怪的默认高宽(scroller,image)：
通常在 Web 浏览器里面，主键是按图片内容的高度，基本上所有组件默认高宽都是0，小程序的image是按照background-image来实现的，所以所有图像会得到一个初始宽高320 240，而且无法通过auto重置，只可以通过具体的值来重写。
7.Require：
因为小程序自成一个体系，JS 的包、CSS 框架都不能用，全部都要重新开始。
8.1M打包上线：
能够更快地下载。
7.小程序与传统APP区别
微信小程序和传统的APP存在较大的差异，所以在设计小程序时不能以传统APP的思维来实现，要采用与之相匹配的小程序思维进行设计。那么，可以从以下6个关键词中思考：
1)轻量：
让用户便捷、迅速、简单地获取服务，不要挑战微信的产品观。
2)社交：
必须和微信生态融入，那就必须考虑到微信的生态基因。抛开社交关系链做的话，最大的可能性是过于平庸导致反响平平。
价值：小程序本身不是为了哗众取众，必须对用户有切实的价值，能够让用户在有需要时主动进入，主动唤醒。
3)引流：
对于第三方来说，微信必须是重要的流量入口。在微信允许的范围内，用可能的手段获取用户流量，是我们需要着重考虑的。
4)数据：
即便没有引流成功，至少要获取用户数据，支持自有APP开展业务。
5)生态：
如果已经有了微信公众号、服务号，在微信生态内考虑和小程序相互依托，互为补充。
8.小程序为开发者提供了什么
小程序提供了一个框架，微信称之为mina，这个框架主要分两个层面，视图层和逻辑层。框架的核心是一个响应的数据绑定系统。WXML 中的动态数据均来自对应 Page 的 data，这个数据绑定是单向的，只有数据发生变化，视图才会做出相应的调整。这种模式，让开发者专注于事件处理上，改变对象状态，实现视图更新。
为了方便以及限制开发者开发，微信自己定义了一系列的基础组件，就是视图层的组成单元（表单组件，媒体组件，导航等），组件自带一些功能与微信风格的样式，类似html标签。微信还提供了很多原生的微信api,用来调用微信内部提供的功能，以及一个微信小程序开发者工具。
9.微信小程序源码结构
视图层（将逻辑层的数据展现在视图上）
逻辑层（通过改变数据[setData方法]来改变视图）
配置文件
在小程序中，微信规定了界面的组成模式，由四个文件组成。
.wxml文件（页面结构文件）标签语言，类似html，真正负责页面结构的文件，可以绑定数据。
.wxss文件（样式表文件）类似css，大部分css样式都相同
.js文件（脚本文件）用来运行我们的逻辑，使用js语言
.json文件（配置文件）主要配置公用的样式，比如tab栏，窗口样式等
10.MINA 组件
基本：view,text
表单：button,input,radio,slider
媒体：image,video,audio,canvas
模态：action-sheet,modal,toast,loading
容器：swiper,scroller
导航：navigator,tabbar
11.微信小程序案例
1. 案例01–电影推荐
案例下载地址
https://github.com/liuyugang123/movie
2. 案例02–天气查询
案例下载地址
https://github.com/liuyugang123/tianqi
3.案例03–知乎日报
案例下载地址
https://github.com/liuyugang123/zhihuAPP
4.案例04–APP
案例下载地址
http://download.csdn.net/my
5.案例05–名片APP
案例下载地址
https://github.com/liuyugang123/CardAPP
6.案例06–聊天室
案例下载地址
https://github.com/liuyugang123/chatAPP
7.案例07–百思不得姐APP
案例下载地址
https://github.com/liuyugang123/BaisiSister
8.案例08–天气预报查询
案例下载地址
https://github.com/liuyugang123/Weather
9.案例08–APP
案例下载地址
https://github.com/liuyugang123/V2EX
10.案例10–zhixingAPP
案例下载地址
https://github.com/liuyugang123/kwonWhere
11.案例11–阅读APP
案例下载地址
https://github.com/liuyugang123/MyRead
12.公众号:
更多源码下载关注公众号:
篇二:[小程序示例]微信小程序示例在哪里，怎么安装小程序示例？
最近天天有刷屏朋友圈的把戏
支付宝账单、网易云音乐、雾霾......
今天轮到微信小程序
相信大家跟小编一样
更新了微信，而且找了半天
特么的小程序到底在哪里?!
一个大神朋友告诉我保持冷静和风度
教你优雅地成为最早一批
使用小程序的中国人！
牛逼吧，时尚吧，期待吧~
第一步
把微信升级到6.5.3版本。
第二步
注意微信的第一个页面顶端
会有一个搜索框，你赶紧输入：小程序示例
于是弹出很多很多
你记得点最下面的：
搜一搜 小程序示例 朋友圈、公众号、文章等。
选那个黑色像钩子的“S”，点开它
这样你就已经激活了小程序
不需要做任何额外的操作！
退出来你点开装朋友圈的“发现”
你发出一阵惊呼666666！
小程序的入口就在最下面！
嘘！还在等什么！
赶紧去朋友圈转发装个逼啊！
我们可是全世界第一批用小程序的人！
篇三:[小程序示例]微信小程序Demo
从微信小程序开始内测到现在, 已经一个月过去了,终于把我自己的微信小程序 demo 墨迹完成了. 真的是墨迹完的, 连我自己都佩服自己的拖延症了(懒癌少女已弃疗*ヾ(′A｀)ノ?*), 总之算是基本完成了(明明有很多组件啊 API 啊根本都没用好嘛 →_→) 以及从来不写 blog 的我也出来码字啦 (??ヮ?)?:???
之前有很长一段时间我算是知乎重度依赖, 所以这次 demo 的模仿对象选择的是知乎(但是写到一半发现我这个决定坑了, 这是后话).
demo 的界面设计以及交互设计均来自于知乎 Android 版本
_工具_: [微信 web 开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1477579747265)
已经全面对非邀请内测用户开放, 且在持续更新
(我码代码的过程中就更新了两版, 所以开发时 IDE 版本不唯一)
不过其实忍受了半个小时微信的开发者工具之后, 我就改在 webstorm 中编辑了, 微信工具成了运行预览的工具, 不过听说IDE 中预览的效果, 也不能保证与真机一样哦~
_设计和功能_: 知乎安卓版本 非常之简易版
_数据_: 毕竟是知乎, 为了防止版权问题, fake 的数据使用的是我自己的回答, 所以...
_项目地址_: GitHub - RebeccaHanjw/weapp-wechat-zhihu: 微信中的知乎--微信小程序 demo // Zhihu in Wechat
1. 基础文件
app.json:
{
"pages":[
"pages/index/index",
"pages/discovery/discovery",
"pages/notify/notify",
"pages/chat/chat",
"pages/more/more",
"pages/answer/answer",
"pages/question/question"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#0068C4",
"navigationBarTitleText": "知乎",
"navigationBarTextStyle":"white",
"enablePullDownRefresh":true
},
"tabBar": {
"color": "#626567",
"selectedColor": "#2A8CE5",
"backgroundColor": "#FBFBFB",
"borderStyle": "white",
"list": [{
"pagePath": "pages/index/index",
"text": "",
"iconPath": "images/index.png",
"selectedIconPath": "images/index_focus.png"
}, {
"pagePath": "pages/discovery/discovery",
"text": "",
"iconPath": "images/discovery.png",
"selectedIconPath": "images/discovery_focus.png"
}, {
"pagePath": "pages/notify/notify",
"text": "",
"iconPath": "images/ring.png",
"selectedIconPath": "images/ring_focus.png"
}, {
"pagePath": "pages/chat/chat",
"text": "",
"iconPath": "images/chat.png",
"selectedIconPath": "images/chat_focus.png"
}, {
"pagePath": "pages/more/more",
"text": "",
"iconPath": "images/burger.png",
"selectedIconPath": "images/burger_focus.png"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}
app.json文件中是对整个小程序的全局配置, 主要用到的字段有pages, window, tabBar, networkTimeout.
* pages 字段: 所有小程序的页面都要在该字段中注册, 该字段数组中的第一个page 默认为小程序首页(设置tab 除外), 没有在 pages 字段注册过的页面貌似不能够进行有效的编译(之前版本的编辑器可以,只是会影响配置文件等的生效, 编辑器更新后会报未注册的错误).
* window 字段: 大多是关于小程序顶部 navigationbar 的一些设置
* tabBar字段: 如果你需要首页面底部带tabbar的样式, 那么就在 tabBar 字段中设置每个 tab 对应的页面, 按顺序对应左至右, 包括路径, tab 文字, tab图标和选中状态图标.
* netwoTimeout: 设置网络超时时间.
* debug: 开启 debug 模式.
app.wxss 文件中为全局样式, 也就是说这个文件中的样式在所有的 page 中均可使用, 若其他页面文件的 wxss 中定义了与该样式文件中相同的属性, 则该文件中的样式被覆盖, 规则与 css 优先规则大致相通.
app.js: 调用 login接口, 回调, 周期函数, 本地存储等等逻辑代码.
2. 页面文件:
页面文件由四部分组成
例如我们有一个首页叫做 index, 则需要在 pages 文件夹下创建文件名相通的三个必要文件:
index.wxml
index.wxss
index.js
*另外 index.json文件为可选, 功能与 app.json 相同, 为该页面的配置文件, 但定义功能有限.*
3. UI
跟平时开发一样, 最开始当然是码 UI
除了需要依照微信的一些新的标签和样式规则, 其他与平时码 UI 并没有太大的不同
需要强调的是, flex 布局在微信小程序中 hin~~~~好用
不过, 同时作为女生和程序员, 不挑刺可就不是我了, 所以下面列举了一些我遇上的坑, 其中有些也许不正确(多多包涵啦\(//?//)\), 有些也许已在 IDE 更新中修正
坑们:
1. 有一些 css 样式在微信 IDE 中不支持, 例如 font-weight, letter-spacing(及类似调整字间距的样式)等
2. <text/>不支持嵌套, 两层<text/>嵌套的结构下, 内层<text/>中的内容会连续显示两次
(在 IDE 后续更新中已修正)
3. 若<view/>与<text/>在结构上并列的话, 显示上会重合, 感受上类似<view/>级别高于<text/>, 防止内容相叠, 必须使用<view/>相并列. 所以并不能像某些地方说的, 把<view/>当做<div>去使用!
4. 元素之前有垂直相邻 margin 的时候(符合 margin 折叠规则), 在微信小程序中会double 显示, 即两个元素的 margin 均摊开, 不遵循 margin 折叠规则.
5. <view/>标签 hidden 属性无效 ( v0.10.101400 中已修正 )
6. 部分情况下, 平级标签 A 与 B 并列, 当 B 通过某些调整向 A 元素位置相叠的时候, 微信 IDE 解析出的效果是 A 的内容和背景色会覆盖 B 元素与之重叠的部分. ( 普通浏览器解析应该是 B 覆盖 A ).
7. 如果用模板+列表渲染的方式来渲染数据的话, 在模板中使用列表渲染的{ {item}}是无效的, 无法被正确识别, 所以列表渲染的时候要把复用的部分写在列表渲染的代码块内 ( 属于数据渲染部分, 后面会提到 )
( 待续... ... )
后面将对于一些我 demo 中写到用到的部分进行说明
列表式的数据渲染
首页
类似于首页以及发现页这种标准列表式的数据展现方式, 微信提供了很好的方案---列表渲染
<block wx:for="{{feed}}" wx:for-index="idx" wx:for-item="item" data-idx="{{idx}}">
<view class="feed-item">
<view class="feed-source">
<a class="">
<view class="avatar">
<image src="{{item.feed_source_img}}"></image>
</view>
<text>{{item.feed_source_name}}{{item.feed_source_txt}}</text>
</a>
<image class="item-more" mode="aspectFit" src="../../images/more.png"></image>
</view>
<view class="feed-content">
<view class="question" qid="{{question_id}}" bindtap="bindQueTap">
<a class="question-link">
<text>{{item.question}}</text>
</a>
</view>
<view class="answer-body">
<view bindtap="bindItemTap">
<text class="answer-txt" aid="{{answer_id}}">{{item.answer_ctnt}}</text>
</view>
<view class="answer-actions" bindtap="bindItemTap">
<view class="like dot">
<a>{{item.good_num}} 赞同 </a>
</view>
<view class="comments dot">
<a>{{item.comment_num}} 评论 </a>
</view>
<view class="follow-it">
<a>关注问题</a>
</view>
</view>
</view>
</view>
</view>
</block>
可以直观的看出, 就是 for 循环来用重复的结构渲染一组数据
for="{{}}"中的内容是想要循环的一组数据, 最外层为数组结构
for-item 指定数组中当前元素的变量名
for-index 指定数组中当前元素下标变量名
同样也使用了 for 渲染的还有顶部的发现页和通知页等顶部的自定义 tabbar
顶部 tabbar 实现
微信只提供了底部 tabbar, 所以顶部的要自己写喽~
顶部 tabbar 的实现在于 for 列表渲染以及 js 配合
wxml:
<view class="top-tab flex-wrp flex-tab " >
<view class="toptab flex-item {{currentNavtab==idx ? "active" : ""}}" wx:for="{{navTab}}" wx:for-index="idx" wx:for-item="itemName" data-idx="{{idx}}" bindtap="switchTab">
{{itemName}}
</view>
</view>
<scroll-view scroll-y="true" class="container discovery withtab" bindscrolltoupper="upper" bindscrolltolower="lower"scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view class="ctnt0" hidden="{{currentNavtab==0 ? "" : true}}">
</view>
<view class="ctnt1 placehold" hidden="{{currentNavtab==1 ? "" : true}}">
<text>圆桌</text>
</view>
<view class="ctnt2 placehold" hidden="{{currentNavtab==2 ? "" : true}}">
<text>热门</text>
</view>
<view class="ctnt3 placehold" hidden="{{currentNavtab==3 ? "" : true}}">
<text>收藏</text>
</view>
</scroll-view>
js:
//discovery.js
Page({
data: {
navTab: ["推荐", "圆桌", "热门", "收藏"],
currentNavtab: "0"
},
onLoad: function () {
console.log("onLoad")
},
switchTab: function(e){
this.setData({
currentNavtab: e.currentTarget.dataset.idx
});
}
});
由于微信不支持任何 dom 和 window 对象, 所以 tabbar的实现依赖于微信提供的视图层的展示逻辑, 以及视图与数据之间的绑定机制.
绑定点击事件, 通过改变一个 data- 属性的值, 来控制元素的类的改变( 从而改变样式等 )
轮播图
<swiper class="activity" indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="155"/>
</swiper-item>
</block>
</swiper>
imgUrls: [
"../../images/24213.jpg",
"../../images/24280.jpg",
"../../images/1444983318907-_DSC1826.jpg"
],
indicatorDots: false,
autoplay: true,
interval: 5000,
duration: 1000,
feed: [],
feed_length: 0
轮播图的实现使用的是微信提供的 swiper 组件, 该组件贴心的提供了各种属性选择, 常用的包括autoplay, interval 时间, duration等
<swiper-item>中包含的是所有轮播的图片, 为了方便修改图片数据, 同样采用 for 渲染绑定 data 的方式
下拉刷新, 上拉加载, 以及数据请求
刷新及继续加载的动作, 依靠的是<scroll-view>标签, 及配套的upper 和 lower 事件
<scroll-view>标签的属性提供了 bindscrolltoupper 和 bindscrolltolower来绑定滚动到顶部及底部所触发的事件, 同时upper-threshold 和 lower-threshold 能够调整触发时距边界的距离
除上述之外, 还提供横向滚动, 滚动触发事件, 及设置滚动条位置等...
<scroll-view scroll-y="true" class="container" bindscrolltoupper="upper" upper-threshold="10" lower-threshold="5" bindscrolltolower="lower"scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<block wx:for="{{feed}}" wx:for-index="idx" wx:for-item="item" data-idx="{{idx}}">
<view class="feed-item">
<view class="feed-source">
<a class="">
<view class="avatar">
<image src="{{item.feed_source_img}}"></image>
</view>
<text>{{item.feed_source_name}}{{item.feed_source_txt}}</text>
</a>
<image class="item-more" mode="aspectFit" src="../../images/more.png"></image>
</view>
<view class="feed-content">
<view class="question" qid="{{question_id}}" bindtap="bindQueTap">
<a class="question-link">
<text>{{item.question}}</text>
</a>
</view>
<view class="answer-body">
<view bindtap="bindItemTap">
<text class="answer-txt" aid="{{answer_id}}">{ {item.answer_ctnt}}</text>
</view>
<view class="answer-actions" bindtap="bindItemTap">
<view class="like dot">
<a>{{item.good_num}} 赞同 </a>
</view>
<view class="comments dot">
<a>{{item.comment_num}} 评论 </a>
</view>
<view class="follow-it">
<a>关注问题</a>
</view>
</view>
</view>
</view>
</view>
</block>
</scroll-view>
滚动至顶或至底时, 触发的加载数据的事件, 本应该调用微信提供的网络请求 API 来获取数据. 但是比较坑的是, 我在选择写仿知乎 demo 的时候没有注意到知乎不提供开放 API, 而微信的 API 不支持直接对.json 文件进行本地请求, 无奈之下, 选择在 js 文件中伪造一段数据, module.exports抛出, 来 fake 数据请求
upper: function () {
wx.showNavigationBarLoading()
this.refresh();
console.log("upper");
setTimeout(function(){wx.hideNavigationBarLoading();wx.stopPullDownRefresh();}, 2000);
},
lower: function (e) {
wx.showNavigationBarLoading();
var that = this;
setTimeout(function(){wx.hideNavigationBarLoading();that.nextLoad();}, 1000);
console.log("lower")
},
//scroll: function (e) {
//console.log("scroll")
//},
//网络请求数据, 实现刷新
refresh0: function(){
var index_api = "";
util.getData(index_api)
.then(function(data){
//this.setData({
//
//});
console.log(data);
});
},
//使用本地 fake 数据实现刷新效果
refresh: function(){
var feed = util.getDiscovery();
console.log("loaddata");
var feed_data = feed.data;
this.setData({
feed:feed_data,
feed_length: feed_data.length
});
},
//使用本地 fake 数据实现继续加载效果
nextLoad: function(){
var next = util.discoveryNext();
console.log("continueload");
var next_data = next.data;
this.setData({
feed: this.data.feed.concat(next_data),
feed_length: this.data.feed_length + next_data.length
});
}
由于是 fake 的数据, 所以这个 demo 并没有做真实的带参跳转, 查询等功能
加载数据的同时, 使用微信提供的加载动画wx.showNavigationBarLoading();
其他
绑定点击事件, 进行页面的跳转wx.navigateTo
部分模块化
input, image 组件等
后续
其实还有大量的组件和 API 还没有用过, 这个 demo 也许后续还会有更新呦, 这取决于懒癌少女的病情严重程度了
项目地址
传送门: GitHub - RebeccaHanjw/weapp-wechat-zhihu: 微信中的知乎--微信小程序 demo // Zhihu in Wechat
也许算是些感受?
其实作为一个小前端, 由于工作中的原因, 使用 MVVM 其实非常少的, 不过写了这个微信小程序 demo 之后, 更加把这方便的思维理顺了. 当然, 写完之后回头看, 还是有超多的不足, 明明好些地方能再换一种写法的. 不过毕竟是我第一次尝试用新鲜热乎的东西写小 demo, 也是第一次尝试写教程...或者算是记录? whatever~~
还有, 非项目的配图均来自网络哦~~
Anyway~ 希望除了写代码之外, 还能在码文字的道路上也多走走吧, 毕竟我是要做代码小仙女的人呀\(≧?≦)ゞ
