Libx

微信小程序之不完全胡乱指东西南北

Word count: 1,113Reading time: 4 min
2018/01/24 Share

今天考完了试,很开心,晚上没什么事,来写篇博客。

先吹吹水

在期末考试之前的某段时间,差不多就是跳一跳火的那段时间吧,由于无聊,去微信公众平台注册了一个账号,然后就对着文档开始了小程序的玩耍之路。之前虽然小程序挺火的,但是也一直没有什么兴趣去看。。主要还是感觉限制太多了叭,个人总感觉小程序,毕竟还是微信一家的东西。像我这种菜鸡也就玩一玩叭。

之前看到过一个有点火的小程序,是一个显示手机信息的小工具,就是比如手机的内存啊,型号什么的信息,然后就有了好几万的用户,然后在我看了小程序的文档之后发现了一个这样的APIwx.getSystemInfo(OBJECT)。基本上就是这个API了叭。。选对了目标用户真的是能飞。

开放的API

小程序所开放的能力感觉还是很强的,非常方便的就能调用手机的各种接口,文件,设备,包括GPS,网络状态,罗盘等,甚至对于剪切板这个东西,浏览器出于安全考虑一直不肯完全放开权限,要写各种hack的东西,微信也提供了很好的封装wx.getClipboardData(OBJECT) wx.setClipboardData(OBJECT),这是微信有点大胆?(也可能是我多想了)不错。

除此之外,小程序的媒体能力也很丰富,录音,视频,相机,甚至实时音视频接口都有提供。对于我们这种辣鸡开发者确实是些可玩性很强的东西。

网络方面,除了常规的request,还提供了websocket的接口,确实是很周到。然后也开放了设置导航条,tabBar,置顶信息的API,给了更大的客户定制能力。

至于API,其他的不多说了。文档说的不能再清楚了。

基本结构

文件格式

  • .json JSON 配置文件(package.json)
  • .wxml WXML 模板文件(.html/.vue)
  • .wxss WXSS 样式文件
  • .js JS 脚本逻辑文件

    文件目录

    这是我写的一小demo
[root@VM_56_194_centos wechat_demo]# tree -L 2
.
|-- app.js
|-- app.json //当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
|-- app.wxss
|-- main.js
|-- main.json
|-- main.wxml
|-- pages
| |-- artlist
| | |-- list.js
| | |-- list.json
| | |-- list.wxml
| | `-- list.wxss
| |-- index
| | |-- index.js
| | |-- index.wxml
| | `-- index.wxss
| `-- logs
| |-- logs.js
| |-- logs.json
| |-- logs.wxml
| `-- logs.wxss
|-- project.config.json
|-- README.md
|-- utils
| `-- util.js
`-- wxParse
|-- emojis
|-- html2json.js
|-- htmlparser.js
|-- showdown.js
|-- wxDiscode.js
|-- wxParse.js
|-- wxParse.wxml
`-- wxParse.wxss

这是一个每日一文的小东西,每天随机推荐一片文章。

其实结构还是很清晰的。。wxparse是一个解析HTML的工具,因为获取的文章数据是带html标签的,需要解析,但是小程序没有像V-html这样舒服东西,所以要找其他的工具,但是使用起来需要直接把文件手动复制到目录下,没有开放的包管理器,可能这就是相对比较封闭的一些劣势吧。

大概思想

依然是如今最火的MVVM思想,数据驱动,挺多地方和Vue还是很像的,要想上手做些demo还是挺快的。基本是都是常见的数据绑定,然后各种 钩子函数

Page({
/**
* 页面的初始数据
*/
data: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {}
});

还是比较容易理解的。

组件之间的通信,数据管理,应该是相对来说比较重要的东西了。但是文档中没有提太多,然后这里有一篇比较好的文章:https://segmentfault.com/a/1190000008895441
比较容易想到的是,最粗暴的,使用localStorage,简单粗暴。然后比较好的方法应该是使用globalData来处理吧。
深一点的其他东西还讨论不来,就先这样吧~

溜了溜了睡觉睡觉,明天回家!!!🍭

CATALOG
  1. 1. 先吹吹水
  2. 2. 开放的API
  3. 3. 基本结构
    1. 3.1. 文件格式
    2. 3.2. 文件目录
  4. 4. 大概思想