微信小程序小结

Posted 2020-11-19

 前几日抽空看了下小程序，发现挺好玩的，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时代的域名了，如果用户有了搜一搜小程序的习惯，想在微信上看你们家东西，如果没有搜到是不是有点遗憾。早点占个名字也行。