微信小程序知识总结及案例集锦

sean 发布于2019-08-20 17:45 / 2605人阅读

摘要：对微信小程序进行全局配置，决定页面文件的路径窗口表现设置网络超时时间设置多等。

微信小程序知识总结及案例集锦

微信小程序的发展会和微信公众号一样，在某个时间点爆发

学习路径

微信小程序最好的教程肯定是官方的文档啦，点击这里直达 微信官方文档

认真跟着文档看一遍，相信有vue前端经验的看下应该就能上手了，然后安装 微信小程序开发者工具

新建一个quick start项目，了解代码结构，这里附上整个quick start代码。

然后就拿个顺手的api练练手，这里附上cnode代码，跟着做完差不多就算入门了。

入门之后就是看其他项目的实现了，这里会附上案例集锦，一些github的案例。

知识总结

tip：看到了另一份W3CSchool整理的文档，可以结合官方文档一起看

目录结构介绍

app.js — 对本页面的窗口表现进行配置。

app.json — 对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

app.wxss — 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。

页面生命周期

小程序注册完成后，加载页面，触发onLoad方法。

页面载入后触发onShow方法，显示页面。

首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。

当小程序后台运行或跳转到其他页面时，触发onHide方法。

当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。

当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload

常规页面A：onLoad()-->onShow()-->onReady()-->onHide()-->onUnload()
释义：

onLoad()：监听页面加载，一个页面只会调用一次

onShow()：监听页面显示，每次打开页面都会调用一次

onReady()：监听页面初次渲染完成，一个页面只会调用一次，代表页面加载完毕，视图层和逻辑层可进行交互

onHide()：监听页面隐藏，当页面被覆盖或进入后台执行

onUnload()：监听页面卸载，当页面被关闭或内存不足主动销毁页面

wx.navigateTo跳转状态下，页面A和页面B的生命周期逻辑

进入A页面：A执行onLoad()-->onShow()-->onReady()；

A页面navigateTo B页面：A执行onHide()，B执行onLoad()-->onShow()-->onReady()；

B页面返回A页面：B执行onUnload()，A执行onReady()；

退出A页面：A执行onUnload()。

Page({
  data:{},
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

组件

基本：view,text

表单：button,input,radio,slider

媒体：image,video,audio,canvas

模态：action-sheet,modal,toast,loading

容器：swiper,scroller

导航：navigator,tabbar

小程序开发踩坑记录

基本的防踩坑Q&A

最佳防踩坑的方式就是看这个微信小程序常见FAQ

好友坑过的开发者社区已解决问题

小程序页面空白

css兼容性问webkit内核

lineShopId长度太长，字符转数字Number

post请求参数加上encodeURIComponent解析字符串

header要设置正确

get "content-type":"application/json"

post "content-type":"application/x-www-form-urlencoded"

content-Type:application/x-www-form-urlencoded,application/json

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

image背景图片地址必须是url或者base64/本地资源无法通过 css 获取可以使用网络图片，或者 base64，或者使用标签

使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。如果scroll-view高度设置为100%,则不能触发上拉刷新和下拉加载事件......

App() 小程序注册入口，全局唯一。App()用来注册一个小程序，全局只有一个，全局的数据也可以放到这里面来操作。

// 注册微信小程序，全局只有一个
let appConfig = {
    // 小程序生命周期的各个阶段
    onLaunch: function(){},
    onShow: function(){},
    onHide: function(){},
    onError: function(){},

    // 自定义函数或者属性
    ...
};
App(appConfig);

// 在别的地方可以获取这个全局唯一的小程序实例
const app = getApp();

小程序并没有提供销毁的方式，所以只有当小程序进入后台一定时间、或者系统资源占用过高的时候，才会被真正的销毁。

Page() 页面注册入口。Page()用来注册一个页面，维护该页面的生命周期以及数据。

// 注册微信小程序，全局只有一个
let pageConfig = {
    data: {},
    // 页面生命周期的各个阶段
    onLoad: function(){},
    onShow: function(){},
    onReady: function(){},
    onHide: function(){},
    onUnload: function(){},
    onPullDownRefresh: function(){},
    onReachBottom: function(){},
    onShareAppMessage: function(){},

    // 自定义函数或者属性
    ...
};
Page(pageConfig);

// 获取页面堆栈，表示历史访问过的页面，最后一个元素为当前页面
const page = getCurrentPages();

{{}} 不能执行方法，只能处理简单的运算如 “+ - * /”，比如遇到遍历list，每个item的金额需要格式化，只能在js里预先格式化好再setData一遍( ╯□╰ )

数字键盘用 type="digit"

禁止页面下拉需要设置 "disableScroll": true

案例集锦

tip：从案例里可以看到很多其他小程序实现的方式，多多看代码

官方demo★★★★★ 官方demo可以看看布局啥的，实现啥的
https://mp.weixin.qq.com/debu...

官方quick start★★★★★ 官方的小程序，可以自己改动看看效果
https://github.com/junhey/wxa...

cnodejs ★★★★ 自己做的第一款小程序，基本上覆盖小程序的基本操作，推荐通过cnodejs的api来实践开发小程序
https://github.com/junhey/wxa...

石头剪刀布★★★★ 腾讯云团队出品，里面有websocket的使用
https://github.com/CFETeam/we...

v2ex ★★★
https://github.com/liuyugang1...

精简版百思不得姐 ★★★
https://github.com/shuncaigao/BS

电影推荐 ★★★
https://github.com/liuyugang1...

计算器 ★★★
https://github.com/dunizb/wxa...

豆瓣图书 ★★★
http://www.jianshu.com/p/c350...

天气 ★★★
http://swiftcafe.io/2016/10/0...

空气质量查询 ★★★
http://blog.csdn.net/yulianli...

github客户端 ★★★
https://blog.zhengxiaowai.cc/...

知乎日报 ★★★
https://github.com/liuyugang1...

持续踩坑中...

后续会进行不断更新，订阅请点watch，收藏请点star，欢迎开issues来提问

专线服务服务器托管微信小程序案例微信小程序微信小程序支付微信小程序部署

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83844.html

2017-07-06 前端日报

摘要：前端日报精选专题之类型判断下百度生态构建发布基于的解决方案将全面支持从绑定，看语言发展和框架设计掘金译机器学习与一付费问答上线，向你心目中的大牛提问吧产品技术日志中文第期团队技术信息流建设翻译基于路由的异步组件加载个必备的装逼 2017-07-06 前端日报精选 JavaScript专题之类型判断(下) · Issue #30 · mqyqingfeng/Blog 百度Web生态构...

shiguibiao 2019-08-20 17:46 评论0 收藏0
开源集锦

摘要：密码服务层分片分片新思路目前国内流行的开源数据库分片实现都基于的改写分发与结果归并。虽然独立开发人员仍是开源社区的重要组成部分，但如今开源项目的大部分工作由企业开发人员完成。 Android2017 这些技术 —— 你都了解过吗插件化热更新对Android平台，我们通常所说的在线热更新就是，例如对已经发布在应用市场上的宿主APK，当我们从crash统计平台上发现某个函数调用有bu...

Simon 2019-06-26 15:51 评论0 收藏0
CSS3实现微信小程序瀑布流布局

摘要：属性规定元素应横跨多少列。和微信小程序瀑布流布局避免在元素内部插入分页符页面的初始数据案例名称你所不知道的红酒知识红酒知识案例名称案例名称案例名称案例名称案例名称案例名称参考：作者：阿峰链接：https://www.jianshu.com/p/14d4b9ac473c 來源：简书 1.column-count 属性规定元素应该被分隔的列数： -moz-column-count...

Godtoy 2019-08-30 15:55 评论0 收藏0
iOS商品详情、ffmpeg播放器、指示器集锦、自定义圆弧菜单、实用工具等源码

摘要：精选源码电商商品详情两种方式实现拖拽功能播放器微信聊天表情雨表情下落表情动画指示器集锦弹窗增加可交互无限个数支持回弹自定义的圆弧菜单协议方式实现功能的实用工具库支持快速解析模型工具，支持。 iOS精选源码电商商品详情 showImg(https://segmentfault.com/img/remote/1460000017089038); Swift.两种方式实现tableView...

YuboonaZhang 2019-06-25 17:02 评论0 收藏0
node+微信小程序实现商城案例

说明：1、本人也是初次完整使用小程序，如有BUG或者不足的地方请在Issues或者本文下方留言，作者会尽快修改，谢谢！2、本项目适合初学者或者准备自学小程序的伙伴小程序功能： |-- images // 公共图片 |-- lib // 公共文件 |-- pages // 页面 ...

BDEEFE 2019-08-23 11:59 评论0 收藏0