微信小程序的开发问题

49 篇文章 1 订阅
37 篇文章 0 订阅

微信开发者工具开发微信遇到的问题

1~~~无法调用npm包

虽然微信小程序开发工具打包时实现require函数加载依赖,但并不是完整的commonJS依赖管理。因为require函数仅仅能够加载项目中的JS文件,必须严格的定义文件路径

2~~~无法使用Babel转码

无法使用babel的根本原因还是无法加载npm包,也就是不能使用es6的新语法,得和无尽的callback作斗争。

3~~~无法重用组件

wxml中支持import和include,但仅时视图模板中可用,并非组件可重用,

wxml其实基于可重用组件,但不允许自定义组件

重要的是,只有真正用到的js文件才被labrador命令加入到项目目录中。这样一个小小的改进象征着我们的小程序可以便捷调用NPM仓库中海量的扩展库!

源码中const _ = require('lodash'); 被编译为 var _ = require('./npm/lodash/lodash.js');

commonents文件夹中存放公用的组件

在 src/pages/index/index.less 中加入代码 @import ‘list’ 即可调用list组件的样式,如果在src/components/list中找不到list.less,那么编译命令将在NPM包中寻找 node_modules/list/index.less 。

在 src/pages/index/index.xml 中加入代码 即可调用list组件的模板文件,component 是Labrador自定义的组件,编译后对应生成 import 和 template。如果在src/components/list中找不到list.xml,那么编译命令将在NPM包中寻找 node_modules/list/index.xml

页面(pages)也是组件

默认首页的示例代码

index.js

import wx, { Component } from 'labrador';
import List from '../../components/list/list';
import Title from '../../components/title/title';
import Counter from '../../components/counter/counter';

export default class Index extends wx.Component {
  state = {
    userInfo: {},
    mottoTitle: 'Hello World',
    count: 0
  };

  children() {
    return {
      list: {
        component: List
      },
      motto: {
        component: Title,
        props: {
          text: this.state.mottoTitle
        }
      },
      counter: {
        component: Counter,
        props: {
          count: this.state.count,
          onChange: this.handleCountChange
        }
      }
    };
  }

  handleCountChange(count) {
    this.setState({ count });
  }

  //事件处理函数
  handleViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    });
  }

  async onLoad() {
    try {
      //调用应用实例的方法获取全局数据
      let userInfo = await wx.app.getUserInfo();
      //更新数据
      this.setState({ userInfo });
      this.update();
    } catch (error) {
      console.error(error.stack);
    }
  }

  onReady() {
    this.setState('mottoTitle', 'Labrador');
  }
}

js中export default会导出一个默认的类,不可手动调用Page(),因为在编译之后pages目录下所有的js全会自动调用Page()方法声明页面。

children()方法

children()方法返回该组件依赖,包含的其他自定义组件,

以上的代码中包含了三个自定义组件list ,title,counter

children()方法包含两个属性,component属性定义了组件类,props属性定义了父组件向子组件传递的props属性对象,

页面也是组件,所有的组件都拥有一样的生命周期函数onLoad, onReady, onShow, onHide, onUnload,onUpdate 以及setState函数。

注意所有的组件生命周期都支持async,但默认的是普通函数,如果函数内没有异步操作,建议采用普通函数,async函数会有一定的性能开销,可能无法顺畅的执行

components和pages两个目录的区别在于,components中存放的组件能够被智能加载,重用,pages目录中的组件在编译时加上pages()调用,所以pages目录中的组件不能被重复调用,也就是说不可被其他组件调用,否则会报错,

布局index.xml

<view class="container">  
  <view class="userinfo" catchtap="handleViewTap">
    <image class="userinfo-avatar" src="{{ state.userInfo.avatarUrl }}" background-size="cover"/>
    <text class="userinfo-nickname">{{ state.userInfo.nickName }}</text>
  </view>
  <view class="usermotto">
    <component key="motto" name="title"/>
  </view>
  <component key="list"/>
  <component key="counter"/>
</view>

以上这段代码中使用了labrador提供的 标签,此标签的作用是导入一个自定义组件的布局文件。标签有两个属性,分别是key(必须)和name(可选,默认是key的值)。key与js逻辑代码中的组件key对应,name是 组件的目录名。

key用来绑定组件js逻辑对象的children中对应的数据,name用于在src/components和node_moudles目录中寻找子组件模板。

labrador支持多层组件嵌套

自定义组件列表

逻辑 src/components/list/list.js

import wx, { Component } from 'labrador';
import Title from '../title/title';
import Item from '../item/item';
import { sleep } from '../../utils/util';

export default class List extends Component {

  constructor(props){
    super(props);
    this.state = {
      items: [
        { id:1, title: 'Labrador' },
        { id:2, title: 'Alaska' }
      ]
    };
  }

  children (){
    return {
      title:{
        component: Title,
        props: { text: 'The List Title' }
      },
      listItems: this.state.items.map((item) => {
        return {
          component: Item,
          key: item.id,
          props: {
            item: item,
            title: item.title,
            isNew: item.isNew,
            onChange: (title) => { this.handleChange(item, title) }
          }
        };
      })
    };
  }

  async onLoad() {
    await sleep(1000);
    this.setState({
      items: [{ id:3, title: 'Collie', isNew: true }].concat(this.data.items)
    });
  }

  handleChange(item, title) {
    let items = this.state.items.map((i) => {
      if(item.id == i.id){
        return Object.assign({},i,{ title });
      }
      return i;
    });
    this.setState({ items });
  }
}

以上代码中children()返回的listItem子组件定义时,是一个组件数组,数组的每一项都是一个子组件的定义,并且需要每一项的key属性,key属性将用于模板渲染性能优化,建议将唯一且不宜变化的值设为子组件的key

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值