微信小程序小结
前几日抽空看了下小程序，发现挺好玩的，mvvm的结构，语法比vue要简单，内置了一系列的组件，很方便。然后开发者工具直接上传代码，提交审核，然后发布，感觉挺好。虽然不打算做个工具类的，但是做个介绍类小程序就很合适了。不用去做什么官网，也不用买服务器域名什么的，用邮箱注册个号，把自己想介绍的东西方式去，手机上发给别人也挺方便。
01.语法结构
结构上很好理解，app.js可以直接获取用户的登录信息，也可以什么都不做，关键还是app.json
{ "pages":[ "pages/index/index", "pages/about/about", "pages/location/location", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "书山有路", "navigationBarTextStyle":"black" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "images/m.png", "selectedIconPath": "images/m1.png" }, { "pagePath": "pages/location/location", "text": "位置", "iconPath": "images/w.png", "selectedIconPath": "images/w1.png" },{ "pagePath": "pages/about/about", "text": "关注", "iconPath": "images/g.png", "selectedIconPath": "images/g1.png" } ] } }
每一个页面必须在pages中进行注册，window是一些基本的外观配置，tabBar就是用来设置一个页底导航。基本上每个页面都包含了.js，.wxml和.wxss文件，.js以
02.滑动
swiper挺方便的，有个问题就是不能自适应高度。
<swiper indicator-dots="true" autoplay="true" interval="{{interval}}" duration="{{duration}}" style='height:{{Hei}}' > <block wx:for="{{imgUrls}}"> <swiper-item > <image src="{{item}}" mode="widthFix" bindload="imgH" class="slide-image" /> </swiper-item> </block> </swiper>
找了个网友的办法，亲测有效
imgH: function (e) { var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度 var imgh = e.detail.height; //图片高度 var imgw = e.detail.width; var swiperH = winWid * imgh / imgw + "px" //等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度 ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度 this.setData({ Hei: swiperH //设置高度 }) },
不要忘了在data里面设置Hei属性。
03.地图
地图官方文档说的很详细，我也没必要说了，主要是用百度找经纬度：拾取坐标系统，很方面。
04.获取用户信息
在默认的app.js里面已经提供了
// 获取用户信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 wx.getUserInfo({ success: res => { // 可以将 res 发送给后台解码出 unionId this.globalData.userInfo = res.userInfo console.log(res.userInfo) // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 if (this.userInfoReadyCallback) { this.userInfoReadyCallback(res) } } }) } } }) }, globalData: { userInfo: null }
如果我们要在别的页面用userInfo
var app = getApp();// Page({ data:{ userInfo:{} } //.... onLoad() { this.setData({ userInfo: app.globalData.userInfo }) } })
对data对象复制都需要使用setData。这样你就可以在页面显示用户的头像和名称。
05.长按扫码
这个功能其实有点鸡肋，因为只能扫小程序的二维码，如果用户都已经进了这个页面，扫码还有个什么意义，因为小程序肯定已经下载了。关键用户还是想扫微信二维码或者公众号的二维码。微信确实管的比较严。
previewImage: function (e) { wx.previewImage({ current: 'http://images.cnblogs.com/xxxxx', // 当前显示图片的http链接 urls: ['http://images.cnblogs.com/xxxx'] // 需要预览的图片http链接列表 }) },
<image class='img' bindtap="previewImage" src='images/actv.jpg' />
这里的current和urls必须是http链接，没法用相对路径。于是最简单的，我就把图片传到了博客园的图册里面... 这样用户点击图片就能出现保存，发送给朋友，收藏。只有小程序二维码才会出现扫码识别....
06.图标
我们需要一些图标，个人毕竟不想去找美工。发现阿里的这个还不错：http://www.iconfont.cn/
当然还有https://www.easyicon.net/，不过这家有时候不稳定。
小结：以上只是些简单功能的小程序开发，整体感觉不错，开发速度很快，只是这个流量和转化有点难，但确实方便。而且这名称就相当于是pc时代的域名了，如果用户有了搜一搜小程序的习惯，想在微信上看你们家东西，如果没有搜到是不是有点遗憾。早点占个名字也行。
