微信小程序入门

微信小程序入门加案例

近半年的时间断断续续的写了一些前端的东西，上周末泡了两天图书馆研究了一下微信小程序，主要还是入门，开发工具，以及实例这三部分：

入门指南

[ 微信官方接入指南 ]

这个链接是微信官方的接入指南，分别为注册小程序账号、填写主体信息、获取AppId等

开发工具

微信有自己的小程序开发工具，可以去官网直接下载并拥有demo实例。界面如下：

官方的东西自带调试功能并可以实时预览，智能提示、手机预览、代码提交也都过关。总体来说它是一款工具而不是IDE。代码编辑功能十分糟糕，api提示功能不全，很多快捷键方式也无法使用，重要的是它没有插件，所以果断放弃。

前端的编辑器也用了好几款，从刚开始的HBuilder、Sublime、webStorm，到现在的vscode。vscode的代码提示、全平台、性能占用内存低等方面都是一流的，毕竟是微软的东西。我使用的编辑器是 vscode ，再安装 WeApp Snippets、vscode wxml、vscode weapp api、vscode-wechat这几个插件就可以实现wxml高亮和实时预览的效果。自带的IDE调试的功能还是可以的，但是代码编辑与预览功能太弱了。所以实时预览的插件选择wept，通过npm即可安装。界面如下：

实际的效果就是，在工作目录通过命令行wept指令开启实时预览，chrome浏览器进入127.0.0.1:3000按F12进入调试模式，页面尺寸选择iPhone6并刷新。另一侧使用vscode对于代码进行编辑，每次保存代码可以自动在浏览器页面实时显示修改的效果。

实例

使用开发者工具创建一个项目的时候，会自动下载一个Demo，供开发者参考。
[ 小程序开发文档 ]

[ 微信小程序开发资源汇总 ]

有了这两篇文章就足够用了。前者是小程序官方的开发文档，后者是GitHub上小程序的资源汇总。

目录结构：

着重讲下app.js、app.json、app.wxss 这三个文件。
app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。
app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

[ 番茄时钟 ]

这是GitHub上一个小程序的实例比较适合入门。但是有几个错误的地方。

1.页面高度的2：1分配问题

想要在微信小程序全屏显示在手机上，使用平时的px,rpx或者直接使用百分比对于高度全屏无效，此时可以通过vh这个单位，整个屏幕默认满屏为100vh;所以将高度设置为100vh，就可以！

2.scroll-view竖向滚动时，底部按钮不固定

解决方案：可以在js中设置滚动条的位置，比如我希望设置为滚动条的高度能够撑满除底部固定按钮外的剩余界面，并在每一次点击按钮之后，往scroll-view中添加内容，并将滚动条可以移到最下方。我是这样设置的：

wxml页面设置：

<scroll-view style="height:{{srollHeight}}px;" scroll-y="true">

js文件设置：

onShow: function() {        wx.setNavigationBarTitle({            title: '任务记录'        })        this.getLogs()        var that = this;        wx.getSystemInfo({            success: function(res) {                let height = res.windowHeight - 50;                that.setData({                    srollHeight: height                });            }        })    }

总结

以上就是我周末两天在图书馆的成果，分享给大家！