微信小程序开发

2018-08-18  本文已影响37人  指尖轻敲

页面间传参

1. 通过url传参
列表页面
<navigator wx:for="{{customers}}" url="./customerDetails/customerDetails?id={{item.id}}"></navigator>

或者通过js调用API进行跳转

wx.navigateTo({
  url: './customerDetails/customerDetails?id=2'
})

如果发现navigateTo / redirectTo跳转无效，可以考虑三个方面：

  1. 页面在app.json中注册了没有
  2. 页面路径有没有写错
  3. 如果以上都没有，那要跳转的页面是tabBar页面吗？如果是，那么问题就在这了。需要使用wx.switchTab方法进行跳转。
详情页面
<view>
    客户详情页，该客户的id是{{id}}
</view>
Page({
    data:{},
    onLoad(options){
        this.setData({
            id: options.id
        });
    },
});

在小程序中，获取url中的参数可以通过onLoad生命周期函数的options参数获取。

2. 本地存储

一个页面

wx.setStorageSync('id', 1);

另一个页面

let id = wx.getStorageSync('id');
this.setData({id: id});

可以正向或者反向传值。

3. 全局APP对象

页面1

let app = getApp();
app.globalData.id = 2;

页面2

<view>id：{{id}}</view>

onLoad(){
    let appData = getApp().globalData;
    this.setData({
        id: appData.id
    });
}

也可以正向或者反向传值。

网络请求

小程序中发起网络请求使用wx.request()API，如果使用过jQuery的ajax请求，那么几乎没什么差异。

wx.request({
      url: 'http://rap2api.taobao.org/app/mock/40422/customer/searchCustomer',
      data: {id: 1},
      method: 'GET',
      header: {'content-type': 'application/json'},// 默认值,
      dateType: 'json',
      success(data) {
        console.log(data);
      },
      fail() {
        console.log('获取客户列表数据失败');
      },
      complete(){
         console.log("无论成功失败都调用");
      }
});

自定义组件

首先在components目录下创建组件的目录结构，和Page（页面）的文件结构是一样的。

组件目录结构.png

写组件没有什么特别的，直接写就可以了，当写完组件后，要想其他页面使用这个组件，需要在组件的json文件中注册一下。

{
  "component": true
}

那么其他页面怎么使用这个组件呢？也需要在页面的json文件中声明一下。这里需要自定义组件的标签名，标签名只可以是小写字母、中划线和下划线组成的。

{
  "usingComponents": {
    "confirm-btn": "../components/confirmBtn/confirmBtn"
  }
}

然后再wxml文件中直接写标签名就可以了。

<confirm-btn></confirm-btn>

父子组件间传值

父-->子
1. 子组件的properties属性

在子组件中设置properties属性，每个属性值可以支持三个参数

properties: {
    id: {
        type: Number,
        value: 1,
        observer(newVal, oldVal, changedPath){}
    },
    name: String,
    phone: {
        type: String,
        value: '',
        propsChanged
    }
},
attached(){
    console.log(this.properties.name);
},
methods: {
    propsChanged(newVal, oldVal){}
}
2. 使用组件时加data-xxx属性

在页面使用组件的时候，在组件标签上添加data-xxx属性：

<confirm-btn data-name="xiaoxiao"></confirm-btn>

在组件中使用this.dataset.xxx来使用传过来的值：

attached(){
    console.log(this.dataset.name);
}
子-->父

首先在子组件中需要先注册一个事件，把detail对象传递给事件函数：

<button bindtap='clickHandle'>向父组件中传入参数</button>

methods: {
    clickHandle(){
        this.triggerEvent("myEvent", {id: 1});
    }
}

在父组件中绑定这个事件触发一个方法，在方法中的事件对象中可以获取传过来的值：

<confirm-btn bindclickHandle="{{handler}}"></confirm-btn>

methods: {
    handler(event){
        console.log(event.detail.id);
    }
}

修改data中数组对象的某个属性值

如果我们想要修改data中的值，基本数据类型可以使用this.setData()直接修改。

data: {
    test: '',
    tags: [
      { tag: '高富帅', active: true, id: 1 },
      { tag: '健身', active: false, id: 2 },
      { tag: '耐克', active: true, id: 3 },
      { tag: '喜欢游戏', active: false, id: 4 }
    ]
}

change:function(e){
  this.setData({
    test:'hello world!'
  })
}

但是如果数据是一个数组，数组的每一个元素都是一个对象，我们只想修改某个对象的某个属性呢？我们的第一反应就是直接加.不就可以了，向下面这样：

this.setData({
    tags[1].active: true
})

如果真这么简单就不写了，我们需要把key的位置赋值给一个变量，然后用中括号把变量括起来，再进行赋值

const thisActive = 'tags[1].active';
this.setData({
    [thisActive]: !this.data.tags[1].active
});

事件相关

阻止事件冒泡

小程序中，滑动遮罩会触发下面的元素跟着滑动（像ios中一样）,首先肯定想到给遮罩元素的滑动事件阻止事件冒泡。不过在小程序中，可以通过catch来绑定事件，这样就阻止了事件冒泡，不需要在触发的函数中写任何东西。

<view catchtouchmove="touchmoveHandle"></view>

wxml和wxs结合使用

在wxml的标签中无法使用js的方法，比如想对字符串截取，在react开发中我们直接使用js的字符串方法就可以。

<p>{timeCreated.substr(0, 10)}</p>

但是在小程序的wxml中是不支持使用js方法的，我们可以结合wxs来实现效果。像html中的script标签一样，可以写在标签里也可以引用外部wxs文件。

文件内部：
<wxs module="tools">
    var subStr = function(value){
    if(value && value !== ''){
        return value.substring(0,10);
    }
        return '';
    }
    module.exports.subStr = subStr;
  </wxs>
<text class="addDate">{{tools.subStr(timeCreated)}}</text>
引入外部文件：
<wxs module="tools" src="../../../wxs/stringHandle.wxs"></wxs>
<text class="add-date">{{tools.subStr(timeCreated)}}</text>

stringHandle.wxs

var subStr = function(value){
    if(value && value !== ''){
        return value.substring(0,10);
    }
    return '';
}
module.exports.subStr = subStr;

wxs中不支持substr方法，可以用substring代替，具体支持方法看文档。https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/06datatype.html

Page.onLoad中获取App.onLaunch中异步请求的结果

场景如下：我们在app.js的onLaunch中调用微信的登录接口来获取用户的相关信息，但是请求是异步的，我们又需要在首页的onLoad中通过获取的用户信息去做数据请求。执行onLoad时异步请求并没有返回结果，这该怎么办呢？

当然如果可以把数据请求放在登录请求回调中，或者把登录请求放在首页中，这就不说了。

方案一

可以通过添加一个登陆中的过度页面，登录完成后直接跳转至首页，这时数据就可以拿到了。
但是有些需求不允许有过度页面怎么办？

方案二

网上提供的方法，使用回调函数来获取数据。可行！

app.js

//登录请求成功后的代码
.then(data => {
      var app = getApp();
      app.globalData.userInfo = data.userInfo;
      // 此处加入 callback 以防止这种情况
      if (app.userInfoReadyCallback) {
             app.userInfoReadyCallback(data.userInfo);
      }
})

首页

onLoad() {
    //如果已经获取到用户信息
    if (app.globalData.userInfo.userId) {
        console.log('成功获取用户');
        //发起数据请求
        wx.request();
    }
    // 如果获取不到用户信息 ，给app添加一个回调函数的方法
    else {
      app.userInfoReadyCallback = res => {
        console.log('userInfoReadyCallback: ', res);
        //当获取登录信息成功后，发起数据请求
        wx.request();
      };
    }
}
上一篇下一篇

猜你喜欢

热点阅读