一个Android开发者眼中的微信小程序

前言

转眼间微信小程序已经推出好几个年头了，作为一名Android开发者，一直想尝试下；正好赶上公司策略调整，在开发完App后领导想着在开发一个小程序版，基于微信庞大的用户量，微信小程序成为了首选；在完成了两三个微信小程序后，有了些心得体会，特此记录下来。鉴于篇幅，这里只说说一些基本的体会，后续会给出更多实际遇到的问题解决。

开搞

首先我们得先看下官方教程：微信小程序官方文档
如果只是体验不发布代码的话就没必要申请账号了，还有不得不说用惯了AS后再用微信的开发工具难免会吐槽一番，当然也可以使用其他的工具然后安装插件开发，这里就不做讨论了。

布局

1、在 Android里面布局代码都是写在xml里面；在小程序里面则是通过wxml（页面）+ wxss（样式）；当然小程序样式也可以都写在wxml里面，类似：

<view style='width:35rpx;height:35rpx;float:right;'></view>

通过style属性也可以写样式，但是一两个还行，多了就会显得很乱。

2、Android里面子view都是在viewgroup 里面；小程序里面<view>标签既可以是子view，也可以是viewgroup，通过wxss能展示各种样式，也能显示文本。
例如：显示竖向排列的两个文本。

在Android里面：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">Ï
            <TextView
                android:text="test"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
            <TextView
                android:text="test"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
   </LinearLayout>

小程序里面：

wxml：

<view class="parent">
    <text>test</text>
    <text>test</text>
</view>

wxss:

.parent{
  display: flex;
  flex-direction: column;
}

可以说小程序里面的flex布局和Android的LinearLayout布局很相似，flex也是推荐的布局，具体可以看教程：Flex布局教程 个人感觉写的很好。

如果要想元素都重叠，类似Android里面的FrameLayout，则需要设置position：absolute，然后通过margin、padding来定位到合适的位置。不得不说小程序的布局相比Android来说还是麻烦不少的，只能通过多练习来熟悉了。。。

3、Android里面可以通过<include> 来引入布局，小程序里面也有template布局模版，通过<import> 引入即可。

4、小程序里面布局推荐使用rpx作为尺寸单位。

业务

1、Android的业务逻辑都是写在Java文件里面，小程序里面都是写在js里面；同样的类似Android的页面生命周期，小程序也有生命周期：

  onLoad: function(options) {
    // 页面初始化
  },
  onReady: function() {
    // 页面渲染完成
  },
  onShow: function() {
    // 页面显示
  },
  onHide: function() {
    // 页面推到后台
  },
  onUnload: function() {
    // 页面关闭
  },

小程序不像Android里面可以监听页面的返回键，所以要在页面返回时处理业务可以在onUnload中处理。

2、与Android中Application类相似，小程序中app.js相当于全局入口，如果开发者有需要在小程序启动时执行的操作，就可以在 onLaunch 方法中执行。
app.js还提供了一个 globalData，用来存储整个小程序使用期间的公共数据。
在其他页面可以通过 getApp() 方法用以获取小程序的 App 实例，来使用全局公共数据。

3、如果有些需要存储的简单数据，类似Android中的SharedPreferences，小程序可以使用wx.setStorageSync("key", value); 存储；wx.getStorageSync("key"); 取出；

4、页面之间的数据传递在小程序里面只能通过路由的方式，就是在跳转链接拼接上要传递的数据：
传数据：

//let obj = JSON.stringify(obj);
wx.navigateTo({
      url: '/pages/index/index?id=' + id,
    })

接受：

 onLoad: function(options) {
 // let obj = JSON.parse(options.obj);
    let id = options.id；
  }

如果要传递对象，则可以在传递前使用JSON.stringify(obj); 将数据转成字符串，在接受时使用JSON.parse(obj); 转换回对象;

5、数据刷新；在处理完数据后我们会用this.setData({...}) 来更新数据源，但是很多初学者都会犯一个错误，看如下错误代码：

wx.request({
            url: "request_url",
            success: function (res) {
                this.setData({...})
            }
        });

按照上面写程序就会报错，再看正确代码：

let that = this;
wx.request({
            url: "request_url",
            success: function (res) {
                that.setData({...})
            }
        });

两者区别在于多了一个变量 that，并且在 onLoad() 方法里面对它进行了赋值，使它等于 this。其实说白了就是一个作用域的问题；其实在Android里面我们也遇到过，就是在点击事件里面跳转设置this的时候，我们都会写上类名，类似：Intent intent =new Intent(MainActivity.this,TestActivity.class); 。

6：事件拦截：在Android里面会有很多事件拦截处理；小程序里面也不例外。看如下小程序布局：

<view bindtap="onclick">
   <image bindtap='tapclick'></image>
</view>

如上我给子父view都设置了bindtap点击事件，这个时候点击下去会发现两个事件都执行了，这在小程序里面称为事件冒泡；要想image被点击，view不被点击则得使用catchtap 属性；修改如下：

<view bindtap="onclick">
   <image catchtap='tapclick'></image>
</view>

这样view的点击事件就不会响应了。
ps：还有些情况是页面层级导致的，需在wxss里面使用z-index 调整页面层级。

结语

好了，今天的分享就到这里了，后续会分享一些实际使用过程中遇到问题的解决方案。
Ps：总的来说写了一段时间的js后发现这种弱语言写起来真的挺舒服，好多数据类型方面都不需要考虑，同时带来的坏处就是不便于查看调试。

最后自己闲下做了个实用的小工具，有兴趣的可以试试。