阅读 856

萌新初探小程序开发

小程序目前基础库版本2.0.6

如何自定义组件化?

假设我们要开发一个模态框组件,需要定制弹出消息和按钮,如何开发?

在`.json`中`usingComponents`为该文件引用的组件的相对路径配置。
{
  "component": true,
  "usingComponents": {}
}
...
//.wxml
<view class='wx_dialog_container' hidden="{{!isShow}}">
    <view class='wx-mask'></view>
    <view class='wx-dialog'>
        <view class='wx-dialog-title'>{{ title }}</view>
        <view class='wx-dialog-content'>{{ content }}</view>
        <view class='wx-dialog-footer'>
          <view class='wx-dialog-btn' catchtap='_cancelEvent'>{{ cancelText }}</view>
          <view class='wx-dialog-btn' catchtap='_confirmEvent'>{{ confirmText }}</view>
        </view>
    </view>
</view>
...
//.js
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   * 用于组件自定义设置
   */
  properties: {
    // 弹窗标题
    title: {            // 属性名
      type: String,     // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
      value: '标题'     // 属性初始值(可选),如果未指定则会根据类型选择一个
    },
    // 弹窗内容
    content: {
      type: String,
      value: '弹窗内容'
    },
    // 弹窗取消按钮文字
    cancelText: {
      type: String,
      value: '取消'
    },
    // 弹窗确认按钮文字
    confirmText: {
      type: String,
      value: '确定'
    }
  },

  /**
   * 私有数据,组件的初始数据
   * 可用于模版渲染
   */
  data: {
    // 弹窗显示控制
    isShow: false
  },
  /**
   * 组件的方法列表
   * 更新属性和数据的方法与更新页面数据的方法类似
   */
  methods: {
    //隐藏弹框
    hideDialog() {
      this.setData({
        isShow: !this.data.isShow
      })
    },
    //展示弹框
    showDialog() {
      this.setData({
        isShow: !this.data.isShow
      })
    },
    /*
    */
    _cancelEvent() {
      //触发取消回调
      this.triggerEvent("cancelEvent")
    },
    _confirmEvent() {
      //触发成功回调
      this.triggerEvent("confirmEvent");
    }
  }
})
复制代码

在小程序中使用 this.data 可以获取内部数据和属性值,但不要直接修改它们,应使用 setData 修改

如果在该模板中,引入其他模板可以使用 import在该文件中使用目标文件定义的template 。 如:在 item.wxml 中定义了一个叫item的template:

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

//在 index.wxml 中引用了 item.wxml,就可以使用item模板:
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>import有作用域的概念,即只会import目标文件内定义的template
复制代码

父组件如何调用子组件中的方法?

组件定义完之后,在页面值引入需要在.josn中配置使用的组件

{
  "usingComponents": {
    "dialog": "/components/Dialog/dialog"
  }
}
//...
.wxml
     <view class="container">
    <dialog id='dialog' 
      title='我是标题' 
      content='恭喜你,学会了小程序组件' 
      cancelText='知道了' 
      confirm='谢谢你'
      bind:cancelEvent="_cancelEvent"  
      bind:confirmEvent="_confirmEvent">
    </dialog>
  
    <button type="primary" bindtap="showDialog"> ClickMe! </button>
</view>
复制代码

当我们需要操作组件中的方法是需要在自定义组件中加上一个 id,然后在 js 代码中使用如下方法:

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {
    //获得dialog组件
    this.dialog = this.selectComponent("#dialog");
  },
 //...
 showDialog() {
    this.dialog.showDialog();
  },

  //取消事件
  _cancelEvent() {
    console.log('你点击了取消');
    this.dialog.hideDialog();
  },
  //确认事件
  _confirmEvent() {
    console.log('你点击了确定');
    this.dialog.hideDialog();
  }
复制代码

子组件中如何调用父组件的方法?

在父组件定义一个

bindcustomevent="pageEventListener"
复制代码

在子组件中调用triggerEvent

  this.triggerEvent('customevent',data)
复制代码

相当于一个事件发布订阅模式,相当于vue$emit组件事件文档

路由跳转如何传值?

模板绑定 data-id点击跳转路由传递id,不同的是id 在currentTarget.dataset对象中

  tapBanner: function (e) {
    if (e.currentTarget.dataset.id != 0) {
      console.log(e)
      wx.navigateTo({
        url: "../detail/detail?id=" + e.currentTarget.dataset.id
      })
    }
  }
复制代码

是否支持模块化开发?

我们可以将一些公共的代码抽离成为一个单独的js文件,作为一个模块。模块只有通过module.exports或者 exports才能对外暴露接口。

// common.js
function sayHello(name) {
  console.log('Hello ${name} !')
}
module.exports.sayHello = sayHello
复制代码
var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  }
复制代码

页面间如何传递数据?

  • 可以获得上一个页面的方法和数据,banners就是我们上一个页面的swiper中的数据
    const pages = getCurrentPages()
    const prevPage = pages[pages.length - 2]
    console.log(prevPage)
复制代码

  • 在跳转页面后的onload方法中的 options 可以获取url 中query中的内容

如何进行数据分析?

小程序提供小访问规模、来源、频次、时长、深度、留存以及页面详情等数据,具体分析用户新增、活跃和留存情况,提供小程序的用户画像数据,包括用户年龄、性别、地区、终端及机型分布 并且如果需要把数据接入到自己的服务中,也可以通过调用微信接口的方式拿到数据:如果需要自定义数据,我们可以在小程序中调用方法:

wx.reportAnalytics(eventName, data)
复制代码

不过在使用前,需要在小程序管理后台自定义分析中新建事件,配置好事件名与字段。另外自定义事件的数据无法通过接口获得。

小程序能否运行在浏览器中?

目前美团开源了一套自己的方案:mpvue ,使用 vue 的形式来编写小程序。并且可以通过改变打包配置的方式,可以一套代码可以直接跑在多端:WEB、小程序、Native(借助weex)。

小程序如何兼容?

小程序的功能不断的增加,但是旧版本的微信客户端并不支持新功能,所以在使用这些新能力的时候需要做兼容。

如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示

if (wx.openBluetoothAdapter) {
 wx.openBluetoothAdapter()
} else {
 wx.showModal({
   title: '提示',
   content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
 })
}
复制代码
关注下面的标签,发现更多相似文章
评论
说说你的看法