代码改变世界

微信小程序小结

2018-06-21 22:29 stoneniqiu 阅读(...) 评论(...) 编辑 收藏

 前几日抽空看了下小程序,发现挺好玩的,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.地图

地图官方文档说的很详细,我也没必要说了,主要是用百度找经纬度:拾取坐标系统,很方面。

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时代的域名了,如果用户有了搜一搜小程序的习惯,想在微信上看你们家东西,如果没有搜到是不是有点遗憾。早点占个名字也行。