最近有在做小程序相关的内容,小程序是微信自己开发的一套标准。但是里面是兼容ES6语法的,因为之前有去学习React-Native的相关内容,所以就又去了解了ES6的相关内容。貌似有点跑题了?。话说回来,小程序是比React-Native简单的。可能没有写过前段代码的同学,不太习惯这种写法。
先上图
这里我在网上找了相关接口,做了一个类似内涵段子客户端的小程序。
大致的目录结构是这样的
这里说一下注意的点:
//跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.switchTab(OBJECT)
这个标签有点类似Android中的
include
标签,把公共的UI部分抽离出来,其他地方也可以使用
view
<view>
<template is="loadingTemplate" data="{{...loadingState}}" />
</view>
因为template
只是占位符,运行起来时,是没有template
标签的,所以,当我们要添加一些事件时,需要加在它的外层view
上面。
var requestUtils = require('../../utils/RequestUtils.js');
<import src="../loading/loading-template.wxml" />
最后是一个/>
闭区间,小程序开发工具不会自动给你添加?。
@import "../loading/loading-template.wxss";
<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
}
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);
}
})
},
最后的最后,遇到问题先冷静一下(遇到问题很正常),仔细查看小程序官网。很多问题都会迎刃而解。