前几日抽空看了下小程序, 发现挺好玩的, 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 以
Page({}) 开始, 设置数据和方法, 很简单. wxml 也就是页面文件, 有很多微信自己定义的元素, 比如 view,text 和 image, 可以分别对应 div,span 和 img.wxss 就和 CSS 一样.
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. 地图
地图官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/map.html#map 说的很详细, 我也没必要说了, 主要是用百度找经纬度: 拾取坐标系统 http://api.map.baidu.com/lbsapi/getpoint/index.html , 很方面.
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 时代的域名了, 如果用户有了搜一搜小程序的习惯, 想在微信上看你们家东西, 如果没有搜到是不是有点遗憾. 早点占个名字也行.
来源: https://www.cnblogs.com/stoneniqiu/p/9191303.html