小程序 – 笔记

2018-04-11 本文已影响20人 Kotyo

前言

最近有在做小程序相关的内容，小程序是微信自己开发的一套标准。但是里面是兼容ES6语法的，因为之前有去学习React-Native的相关内容，所以就又去了解了ES6的相关内容。貌似有点跑题了😳。话说回来，小程序是比React-Native简单的。可能没有写过前段代码的同学，不太习惯这种写法。

先上图

这里我在网上找了相关接口，做了一个类似内涵段子客户端的小程序。

大致的目录结构是这样的

这里说一下注意的点：

现在的小程序开发工具（v1.02.1803210），当你把新建好的目录拖到别的目录时，自己为文件添加的内容会被删除。所以，大家在修改目录的时候一定要注意。
当你修改文件名的时候，被调用的地方文件名并不会被修改。
往项目里面添加外部资源只能打开对应的文件夹才行
因为版本更迭的原因，当你进入有底部Tab的页面时需要使用

//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.switchTab(OBJECT)

template模板文件

这个标签有点类似Android中的include标签，把公共的UI部分抽离出来，其他地方也可以使用

在使用template时，在外面套一层view

<view>
  <template is="loadingTemplate" data="{{...loadingState}}" />
</view>

因为template只是占位符，运行起来时，是没有template标签的，所以，当我们要添加一些事件时，需要加在它的外层view上面。

JS引用JS文件

var requestUtils = require('../../utils/RequestUtils.js');

引用模板文件

<import src="../loading/loading-template.wxml" />

最后是一个/>闭区间，小程序开发工具不会自动给你添加😓。

引用样式文件

@import "../loading/loading-template.wxss";

data传值只能传一个对象过去
比如：

<template  name="loadingTemplate">
  <view class='loading-container'  hidden='{{!loading}}'>
    <image src='../../images/icon/icon-loading.png' class='loading-img'></image>
    <view class='loading'>正在加载...</view>
  </view>
  <view class='loadingComplete' hidden='{{!loadingComplete}}'>已全部加载</view>
</template>

上面我在模板文件中使用了loading和loadingComplete两个变量。如果要传值的话，就要像下面这样。

<template is="loadingTemplate" data="{{...loadingState}}" />

这里的loadingState是一个对象

var loadingState={
  loading: loading,
  loadingComplete: loadingComplete
}
this.setData({
  loadingState:loadingState
}

this的作用域问题
大家写Android都知道，当我们在内部类中调用Toast时，填写Context是不能直接写this的。因为this指的是当前类。

btn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
       Toast.makeText(Activity.this, "", Toast.LENGTH_SHORT).show();
    }
 });

小程序中也一样，在一个方法内部调用外部方法的时候，就不能用this，需要声明一个变量保存this，然后再使用这个变量。类似下面这样。

getDataList: function () {
    let that = this;
    requestUtils.getRequestUrl(ctype, page, function (data) {
      if (data.data.length === 0) {
        that.setData({
          loadingState: that.changeLoadingState(false,true)
        })
      } else {
        var list = [];
        list = that.data.dataList.concat(data.data);
        that.parseData(list);
      }
    })
  },

最后的最后，遇到问题先冷静一下（遇到问题很正常），仔细查看小程序官网。很多问题都会迎刃而解。

小程序 – 笔记

前言

猜你喜欢

热点阅读