小程序 – 笔记

前言

最近有在做小程序相关的内容,小程序是微信自己开发的一套标准。但是里面是兼容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>

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

<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);
      }
    })
  },

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

vue - 组件间通信 之 中央事件总线bus

1846
来自专栏前端说吧

vue - 组件间通信 之 中央事件总线bus

5365
来自专栏Modeng的专栏

Vue双向绑定原理,教你一步一步实现双向绑定

当今前端天下以 Angular、React、vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋。

661
来自专栏Android小菜鸡

自定义View学习之路(一)————自定义xml字段

  走往android的进阶之路,避不开自定义View的学习和绘制。很多时候,我们也想要自己在xml中设置一些自己可控的字段。然后在代码中响应。这里简单介绍如何...

803
来自专栏游戏杂谈

Unity的RuntimeInitializeOnLoadMethod属性初探

Unity 5.0开始增加了RuntimeInitializeOnLoadMethodAttribute,这样就很方便在游戏初始化之前做一些额外的初始化工作,比...

481
来自专栏james大数据架构

Android 2.x中使用actionbar - Actionbarsherlock (2)

先前有一个项目,是基于android4.0来开发,使用到了Fragment及ActionBar,没打算支持android2.1-android2.3系列版本 写...

2386
来自专栏GIS讲堂

lzugis——Arcgis Server for JavaScript API之POI

POI(Point Of Interest),感兴趣点,其实呢,严格意义上说应该不是POI,但是单位就这样叫了,我也就这样叫了,其实现的功能大致是这样的:用过百...

772
来自专栏WeaponZhi

高效开发 MVVM 和 databinding 你需要使用的工具

阅读本篇大概需要 11 分钟。 相信不少同学已经开始使用 MVVM 作为自己 Android 开发架构了,但实际上,我在使用过程中查阅资料发现,网上有关 MVV...

3729
来自专栏李蔚蓬的专栏

Material Design 实战 之第五弹 —— 下拉刷新(SwipeRefreshLayout)

SwipeRefreshLayout即是实现下拉刷新功能的核心类,它由support-v4库提供的。

1905
来自专栏Android群英传

Android事件处理机制

783

扫码关注云+社区