zoukankan      html  css  js  c++  java
  • 小程序框架

    一、UI 框架

    UI 框架主要提供的是不同样式的组件,可以方便开发者使用一些现成的样式,完成自己产品、应用的开发。

    名称 git地址 说明
    WeUI https://github.com/Tencent/weui-wxss 由微信官方团队推出的
    iView Weapp https://github.com/TalkingData/iview-weapp 一套高质量的微信小程序 UI 组件库
    Vant Weapp https://github.com/youzan/vant-weapp 是有赞前端团队开源的移动端组件库,于 2017 年开源,组件大多与电商相关

    二、基础框架

    基础框架的主要能力是提供小程序的打包、编译、组件化等能力,让开发者可以更加简单,方便的使用自己熟悉的方案,完成应用的开发。

    1、MINA

    官网地址:https://developers.weixin.qq.com/miniprogram/dev/reference/
    是微信团队为小程序提供的框架命名为MINA的应用框架

    2、wepy

    文档地址:https://wepyjs.github.io/wepy-docs/1.x/#/
    是腾讯团队推出的小程序组件化开发框架

    3、mpvue

    官网地址:http://mpvue.com/

    mpvue 2018年3月份在美团点评上开源, 至今好像已停止维护
    mpvue(Vue.js in mini program) 是一个使用 Vue.js 开发小程序的前端框架。

    框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

    使用 mpvue 开发小程序,你将在小程序技术体系的基础上获取到这样一些能力:

    1.彻底的组件化开发能力:提高代码复用性
    2.完整的 Vue.js 开发体验
    3.方便的 Vuex 数据管理方案:方便构建复杂应用
    4.快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload
    5.支持使用 npm 外部依赖
    6.使用 Vue.js 命令行工具 vue-cli 快速初始化项目
    7、H5 代码转换编译成小程序目标代码的能力

    初始化项目

    # 1. 先检查下 Node.js 是否安装成功
    $ node -v
    v8.9.0
    
    $ npm -v
    5.6.0
    
    # 2. 由于众所周知的原因,可以考虑切换源为 taobao 源
    $ npm set registry https://registry.npm.taobao.org/
    
    # 3. 全局安装 vue-cli
    # 一般是要 sudo 权限的,注意vue脚手架版本必须是2.9
    $ npm install --global vue-cli@2.9
    
    # 4. 创建一个基于 mpvue-quickstart 模板的新项目
    # 新手一路回车选择默认就可以了
    $ vue init mpvue/mpvue-quickstart my-project
    
    # 5. 安装依赖,走你
    $ cd my-project
    $ npm install
    $ npm run dev
    

    注意事项:新增的页面需要重新 npm run dev 来进行编译

    4、taro

    官方文档:http://taro-docs.jd.com/taro/docs/README/index.html

    Taro 是京东 - 凹凸实验室打造的一个开放式跨端跨框架,2018年6月7日正式开源
    1.x、 2.x都是使用react来开发小程序, 3.x支持使用 React/Vue/Nerv 等框架来开发

    支持平台:
    H5
    reactNative
    微信小程序
    京东小程序
    百度小程序
    支付宝小程序
    字节跳动小程序
    QQ 小程序
    钉钉小程序
    企业微信小程序
    支付宝 IOT 小程序
    飞书小程序

    安装及使用

    安装cli工具

    # 使用 npm 安装 CLI
    $ npm install -g @tarojs/cli
    
    # OR 使用 yarn 安装 CLI
    $ yarn global add @tarojs/cli
    
    # OR 安装了 cnpm,使用 cnpm 安装 CLI
    $ cnpm install -g @tarojs/cli
    
    值得一提的是,如果安装过程出现sass相关的安装错误,请在安装 mirror-config-china 后重试。
    $ npm install -g mirror-config-china
    
    查看 Taro 全部版本信息
    npm info @tarojs/cli  
    

    项目初始化:

    $ taro init my-taro-App
    

    5、uni-app

    官网地址:https://uniapp.dcloud.io/

    是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝)、快应用等多个平台。

    需要使用HBuilderX IDE工具

  • 相关阅读:
    Java基础系列(3)- 程序流程控制
    Linux 文本处理三剑客
    POJ3592 Instantaneous Transference题解
    插入排序的优化非希尔【不靠谱地讲可以优化到O(nlogn)】 USACO 丑数
    BZOJ2818 与 BZOJ2301【euler,线性筛,莫比乌斯】
    BZOJ1857 传送带 (三分法求单峰函数极值)
    线段树详解
    二叉查找树 详解
    最小函数值 洛谷P2085
    二叉树的遍历转换(层序,中序转先序)
  • 原文地址:https://www.cnblogs.com/sgs123/p/15402299.html
Copyright © 2011-2022 走看看