Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including miniapp-page-assign with all npm packages installed. Try it out:

var miniappPageAssign = require("miniapp-page-assign")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

miniapp-page-assign v0.0.6

A simple miniapp page assign.

微信小程序注册页面中间件

Install

npm install miniapp-page-assign

Usage

由于微信小程序的import模块从node_modules目录引入文件会有问题,可以直接下载miniapp-page-assign.js(build目录下)放到/utils文件夹下。

In app.js

import {setLaunchInfo, pageAssign} from './utils/miniapp-page-assign';
App({
  mixin: [],
  onShow: function (options) {
    // 保存进入页面的信息
    setLaunchInfo(options);
    // ...other code
  },
  onLaunch: function () {
    // 注册simpleAssign到wx全局
    wx.pageAssign = pageAssign;
    // ...other code
  }
  // ...other code
});

In index/index.js (或者任意小程序页面)

Page(new wx.pageAssign({
  data: {
    
  },
  // 微信注册页面生命周期函数、事件处理函数
  // 包括onLoad, onShow, onReady, onHide, onUnload, onPullDownRefresh, onReachBottom, onShareAppMessage, onPageScroll, onTabItemTap
  onLoad: funtion (options) {
  },
  // others
  methods: {
    // 自定义事件
  }
}));

API

使用this.$data代理this.data

// 原生小程序语法:
this.setData({key: 'value'});
// 中间件用法:
this.$data.key = 'value';

使用this.$route访问页面路由信息

访问当前route可以得到当前的页面路由,传参和上一个页面的路由

在app.js中调用的 setLaunchInfo(options); 是很重要的一步,它用于保存用户进入小程序的场景值、shareTicket等信息

// other code
onLoad () {
  console.log(this.$route.path) //当前小程序页面路径
  console.log(this.$route.query)  //当前小程序页面参数
  console.log(this.$route.formPath)  //上一个小程序页面路径
  console.log(this.$route.fromQuery)  //上一个小程序页面参数
  
  // 以下几个如果没有在app.js中调用setLaunchInfo则不存在
  console.log(this.$route.scene)  // 进入页面场景值
  console.log(this.$route.shareTicket) // 进入页面带上的shareTicket
  console.log(this.$route.referrerInfo) // 进入小程序带上的卡券信息
  // other code
},

Tip

  • 页面跳转的两个页面必须都使用wx.pageAssign注册
  • 页面场景值,shareTicket,卡券信息等只会在特殊的情况进入小程序才会获得,具体参考小程序文档

使用mixin

在框架中,允许使用mixin引用外部定义的公共数据和方法

// common.js
export default {
  data: {
    hello: 'hello world'
  },
  methods: {
    sayHello: function () {
      console.log(this.$data.hello);
    }
  }
}

// index.js
import commonMixin from 'common';
Page(new wx.pageAssign({
  mixin: [commonMixin],
  data: {
    demoVal: 'demo',
    demoObj: {
      val: 'demoObj'
    },
    FibonacciArr: []
  },
  onLoad () {
    this.sayHello();
    // other code
  },
}));

this.onModel方法双向绑定数据

在页面标签上添加data-key和data-value,然后在触发更新的事件上绑定onModel方法,一些原生组件则不需要添加data-value,具体用法如下

<!-- index.wxml -- >
<view>测试数据:{{demoVal}}</view>  

<input 
  value="{{demoVal}}" 
  data-key="demoVal" 
  bindinput="onModel"></input>

<textarea
  value="{{demoVal}}" 
  data-key="demoVal" 
  bindinput="onModel"></textarea>

<button 
  data-key="demoVal" 
  data-value="hello world" 
  bindtap="onModel">设置value为“hello world”</button>
  
<view>测试数据2:{{demoObj.val}}</view>  

<input 
  class="border"
  value="{{demoObj.val}}" 
  data-key="demoObj.val" 
  bindinput="onModel"></input>
// index.js
data: {
  demoVal: 'demo',
  demoObj: {
    val: 'demoObj'
  }
}

Introduction

为什么使用它? 如果你是使用的原生小程序做开发,使用miniapp-page-assign,你可以获得以下好处

无需重新选择其他架构,比如mpvue

如果你的小程序使用原生小程序开发到一半,此时你重构使用mpvue可能成本过高,或者使用新的框架会有很多坑。但如果是构建新项目,还是推荐mpvue,毕竟好用的多。

可以即插即用,并不影响原生小程序的结构和用法

this.$data使用的是Proxy对象代理this.data,它可以和this.setData共存。并且你可以在新的页面引入和使用这套中间件(但是路由信息需要手动控制)。

对整个页面的生命周期或方法进行了一次封装

这将是一个巨大的好处,比如分享,你甚至可以在所有的页面定制同一个分享内容,或者根据参数定制分享内容,而无需在每一个小程序页面定制onShareAppMessage方法,只要你稍稍阅读一下源码就能发现其中的好处。比如你想要在所有的页面分享调用微信的自定义数据统计,你也可以直接在源码中修改。

使用mixin

mixin允许你从外部引入一些公用的data和methods,这将大大的减少代码量,因为你可以抽取很多的公用方法。

更多功能

正在整理开发中

欢迎拍砖

请轻拍~

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free