美文网首页
小程序选型

小程序选型

作者: Monster_8253 | 来源:发表于2019-01-08 18:37 被阅读0次

小程序概述

https://baike.baidu.com/item/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/20171697?fr=aladdin

小demo

开发者工具


image.png

解决方案
用webstrom

https://www.jianshu.com/p/028addf07971

关于小程序中网络相关API的说明

https://developers.weixin.qq.com/miniprogram/dev/api/api-network.html

主流 小程序 JS 框架

腾讯 wepy 、美团 mpvue 、京东 taro
由于现有的 H5 是由 vue 实现的为了更加方便的迁移修改代码,所以直接 pass 掉 taro

原生 wypy mpvue
作者 微信官方 腾讯团队 美团
语法规范 小程序框架 类Vue开发规范 Vue 开发规范
标签 小程序标签 小程序标签 html + 小程序标签
样式 wxss sass、less、postcss sass、less、styus
组件化 自身的组件化做的并不好 Vue 组件化规范 + 小程序原生组件化 Vue 组件化规范 + 小程序原生组件化
多端复用 不可复用 支持转H5 支持转H5
自动构建 小程序原生代码无需构建 框架内部构建 webpack 构建
上手成本 全新学习 Vue 和 wepy 熟悉 Vue 即可
状态分发管理 不支持 redux Vuex
包管理 基本不支持 npm npm
github start 15917 15244
github lssuse 114 open, 1496 close 217 open, 1009 close

生命周期

同为vue规范的mpvue和wepy的生命周期和各种方法不尽相同

wepy

wepy生命周期基本与原生小程序相同,再此基础上糅合了一些vue的特性; 对于WePY中的methods属性,因为与Vue中的使用习惯不一致,非常容易造成误解,这里需要特别强调一下:WePY中的methods属性只能声明页面wxml标签的bind、catch事件,不能声明自定义方法,这与Vue中的用法是不一致的。

import wepy from 'wepy';

export default class MyPage extends wepy.page {
// export default class MyComponent extends wepy.component {
    customData = {}  // 自定义数据

    customFunction () {}  //自定义方法

    onLoad () {}  // 在Page和Component共用的生命周期函数

    onShow () {}  // 只在Page中存在的页面生命周期函数

    config = {};  // 只在Page实例中存在的配置数据,对应于原生的page.json文件

    data = {};  // 页面所需数据均需在这里声明,可用于模板数据绑定

    components = {};  // 声明页面中所引用的组件,或声明组件中所引用的子组件

    mixins = [];  // 声明页面所引用的Mixin实例

    computed = {};  // 声明计算属性(详见后文介绍)

    watch = {};  // 声明数据watcher(详见后文介绍)

    methods = {};  // 声明页面wxml中标签的事件处理函数。注意,此处只用于声明页面wxml中标签的bind、catch事件,自定义方法需以自定义方法的方式声明

    events = {};  // 声明组件之间的事件处理函数
}

mpvue

mpvue 除了 Vue 本身的生命周期外,还兼容了小程序生命周期,这部分生命周期钩子的来源于微信小程序的 Page, 除特殊情况外,不建议使用小程序的生命周期 钩子。

Vue
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed

app 部分
onLaunch,初始化
onShow,当小程序启动,或从后台进入前台显示
onHide,当小程序从前台进入后台

page 部分
onLoad,监听页面加载
onShow,监听页面显示
onReady,监听页面初次渲染完成
onHide,监听页面隐藏
onUnload,监听页面卸载
onPullDownRefresh,监听用户下拉动作
onReachBottom,页面上拉触底事件的处理函数
onShareAppMessage,用户点击右上角分享
onPageScroll,页面滚动
onTabItemTap, 当前是 tab 页时,点击 tab 时触发
new Vue({
  data: {
    a: 1
  },
  created () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  },
  onShow () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a, '小程序触发的 onshow')
  }
})
// => "a is: 1"

参考文献
https://www.cnblogs.com/Smiled/p/9806781.html
https://www.jianshu.com/p/66ac8d24c670
小程序文档:https://developers.weixin.qq.com/miniprogram/dev/
mpvue:http://mpvue.com/
wepy:https://tencent.github.io/wepy/

相关文章

  • 小程序选型

    小程序概述 https://baike.baidu.com/item/%E5%BE%AE%E4%BF%A1%E5%...

  • 小程序渲染层和逻辑层交互原理

    小程序开发和网页开发的区别 小程序运行环境 渲染页面的技术选型 小程序渲染层和逻辑层交互的关系 Native指的是...

  • 小程序开源框架选型

    从 2016 年微信小程序内测到现在,各大公司对小程序的业务开发需求越来越大,但是微信的原生工具在实际使用时很不便...

  • 敏捷项目快速启动指引

    1.需求启动 - 制作出经典版本需求梳理清单 技术需求选型: 小程序开发工具UniAPP微信小程序、语言框架-V...

  • 头条小程序

    1、业务需求天天学农现有客户端为 android、H5、微信小程序,准备新开发今日头条小程序。 2、选型 注:开发...

  • 利用 Wepy + ColorUI 框架快速开发小程序

    本文主要说明从技术选型上选用 wepy + colorUI 快速开发可维护的微信小程序。Wepy:https://...

  • 小程序开发技术框架选型

    背景 1、业务:公司扩展业务,需要同时开发小程序、公众号、H5移动的等多个平台的服务,在功能、UI交互上基本一致。...

  • 小程序框架选型方案报告

    目前微信小程序框架:chameleon、Taro、uni-app、mpvue、WePY 生态 1. 开发工具 就开...

  • 微信小程序调研

    微信小程序开发方案框架选型:Wepy、Mpvue、Taro 官方写法 优点:官方支持、新功能可以马上使用 缺点:官...

  • 【前端小程序】01 - 项目搭建

    1. 技术选型 1.1 小程序的第三方框架 腾讯的 wepy 类似 vue。 美团 mpvue 类似 vue 。 ...

网友评论

      本文标题:小程序选型

      本文链接:https://www.haomeiwen.com/subject/ksuprqtx.html