当前位置:首页 > 移动开发 >

MPX 1.x 微信小程序框架手册 PDF 完整版

大小:1.75 MB已被21人关注

MPX 1.x 微信小程序框架手册是一个不错的学习资源,大小为1.75 MB,由家宜年 提供,微信小程序类资源中评分为9.6。

Tags:微信小程序 框架手册 

资源截图

MPX 1.x 微信小程序框架手册

内容介绍

Mpx是一款致力于提高小程序开发体验的增强型小程序框架,通过Mpx,我们能够最先进的web开发体验(Vue + Webpack)来开发生产性能深度优化的小程序,Mpx具有以下一些优秀特性:

  • 数据响应特性(watch/computed)
  • 增强的模板语法(动态组件/样式绑定/类名绑定/内联事件函数/双向绑定等)
  • 深度性能优化(原生自定义组件/基于依赖收集和数据变化的setData)
  • Webpack编译(npm/循环依赖/Babel/ESLint/css预编译/代码优化等)
  • 单文件组件开发
  • 状态管理(Vuex规范/多实例/可合并)
  • 跨团队合作(packages)
  • 逻辑复用能力(mixins)
  • 脚手架支持
  • 小程序自身规范的完全支持
  • 支付宝小程序的支持

使用

# 安装mpx命令行工具
npm i -g @mpxjs/cli
# 初始化项目
mpx init <project-name>
# 进入项目目录
cd <project-name>
# 安装依赖
npm i
# development
npm run watch
# production
npm run build -p

打开微信开发者工具打开项目目录下的dist文件夹即可预览效果。

学习笔记

给大家精选了网上关于《MPX 1.x 微信小程序框架手册》的学习笔记心得及相关实例内容,值得大家学习参考。

微信小程序 如何获取网络状态

前言

手机连接到互联网有几种方式:Wifi、2G、3G、4G,包括很快到来的5G,每种方式的上传速度和下载速度差异很大,它们的计费方式的差异也导致用户在使用互联网服务的时候有不同的使用习惯。

Wifi相对于其他几种网络连接方式,其速度会更快。Wifi一般都是免费供用户使用,通过移动数据网络是需要根据使用流量进行计费的。我们考虑这样一个场景,小程序需要下载一些文档,然后通过小程序的能力去预览这个文档,这些文档可能文件体积比较大,对于某些用户来说,他们并不想耗费太多的数据流量去预览文档。考虑到这样的情况,我们可以通过小程序提供的获取网络状态的能力,做一些更友好的体验提示。

代码利用wx.getNetworkType获取网络状态

代码:

// 预览文档
 lookFile(){
  wx.getNetworkType({
   success: function (res) {
    // networkType字段的有效值:
    // wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
    if (res.networkType == 'wifi') {
     // 从网络上下载pdf文档
     wx.downloadFile({
      url: 'https://pic25.nipic.com/20121205/10197997_003647426000_2.jpg',
      success: function (res) {
       // 下载成功之后进行预览文档
       wx.openDocument({
        filePath: res.tempFilePath
       })
      }
     })
    } else {
     wx.showModal({
      title: '提示',
      content: '当前为非Wifi环境,确定下载吗?',
      confirmText: '确定',
      cancelText: '取消',
      success: function (res) {
       if (res.confirm) {
        console.log('确定操作')
        wx.downloadFile({
         url: 'https://pic25.nipic.com/20121205/10197997_003647426000_2.jpg',
         success: function (res) {
          // 下载成功之后进行预览文档
          wx.openDocument({
           filePath: res.tempFilePath
          })
         }
        })
       } else if (res.cancel) {
        console.log('取消操作')
        wx.showToast({
         title:'取消成功'
        })
       }
      }
     })
    }
   }
  })
 }

某些情况下,我们的手机连接到网络的方式会动态变化,例如手机设备连接到一个信号不稳定的Wifi热点,导致手机会经常从Wifi切换到移动数据网络。小程序宿主环境也提供了一个可以动态监听网络状态变化的接口wx.onNetworkStatusChange,让开发者可以及时根据网络状况去调整小程序的体验,wx.onNetworkStatusChange这个接口的使用场景留给读者来思考。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

展开 +

收起 -

相关资源

微信小程序开发图解案例教程
微信小程序开发图解案例教程 高清扫描版

《微信小程序开发图解案例教程》 分两篇,介绍了微信小程序设计的基本知识和实战案例。为微信小程序快速入门,包括认识微信小程序、微信小程序框架分析、用微信小程序组件构建UI界面

立即下载
21天精通微信小程序开发
21天精通微信小程序开发 高清版

这是一本帮助编程爱好者和从业人员从零开始学习微信小程序设计的书。 21天精通微信小程序开发 紧跟微信小程序的技术发展,是目前在该领域率先进行系统的技术探讨和培训的著作。本书站

立即下载
微信小程序开发入门:从0到1实现天气小程序
微信小程序开发入门:从0到1实现天气小程序 超清版

微信小程序已经火了一段时间了,之前一直也在关注,就这半年的发展来看,相对原生APP大部分公司还是不愿意将主营业务放到微信平台上,以免受制于腾讯,不过就小程序的应用场景(用完即走和二维码分发等)还是很值得我们学习的,技术上面如果了解React的话,会发现他们在组件化上面有很多雷同之处。说白了,小程序就是基于微信平台的H5轻应用,微信将系统底层功能(设备、位置、媒体、文件等)和微信自身功能(登录、支付、分享等)封装成

立即下载
微信小程序运营实战
微信小程序运营实战 全书扫描版

小程序给用户带来怎样的价值?小程序给中小企业带来怎样的机遇?传统企业如何借助小程序实现移动化转型?企业如何利小程序实现品牌营销?商家如何借助小程序进行运营推广

立即下载
微信小程序开发:入门与实践
微信小程序开发:入门与实践 高清扫描版

微信小程序开发:入门与实践 主要围绕Orange Can项目展开一系列编码工作,用几近真实的项目介绍小程序的各个API、组件用法,并附带一些小程序开发的经验、技巧以及常见的误区说明。整个

立即下载
微信小程序:分享微信创业2.0时代千亿红利
微信小程序:分享微信创业2.0时代千亿红利 完整高清版

小程序是一个新的概念,给创业者、投资者、程序员带来了福音。小程序是互联网创业的新方向,是投资机构的热门话题,也为程序员降低了工作强度。面对这一热点,很多人想投身其中,但

立即下载
知晓程序:微信小程序入门指南
知晓程序:微信小程序入门指南 高清版

本教程是一本分析小程序生态、解读小程序产品设计与开发的入门图书。全书共7章,全面讲解了小程序的基本知识、小程序将给我们带来什么改变、小程序上手案例、如何转行小程序开发、电

立即下载
下载地址:百度网盘下载
读者心得
168小时40分钟前回答

微信小程序遍历Echarts图表实现多个饼图

如何在微信小程序中使用Echarts可以看我的另一个教程:点击查看 首先看一个简单的例子 1.wxml文件 view style='width:100%;height:200rpx' ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"/ec-canvas/view 2.js文件 import * as echarts from '../../common/ec-canvas/echarts';function initChart(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height }) canvas.setChart(chart); var option = { series: [ { name: '访问来源', type: 'pie', radius: ['60%', '70%'], animationType: 'scale', silent: true, labelLine: { normal: { show: false } }, data: [ {value:10}, {value:3} ], color: ["#666", "#179B16"] } ] } chart.setOption(option); return chart;}Page({ /** * 页面的初始数据 */ data: { ec: { onInit: initCha……

9小时26分钟前回答

微信小程序实现页面下拉刷新和上拉加载功能详解

本文实例讲述了微信小程序实现页面下拉刷新和上拉加载功能。分享给大家供大家参考,具体如下: web手机端或App中经常会有下拉刷新,上拉加载这些功能。 微信小程序中如何实现下拉刷新,上拉加载的功能。 实现思路: 1.监听界面的下拉刷新事件和上拉加载事件 bindscrolltolower 监听上拉加载 bindscrolltoupper 监听下拉刷新 2.下拉刷新时清空数据列表,并重新请求数据进行界面展示。 3.上拉加载增量请求数据,增量增加数据列表,增量界面展示 效果图: 实现代码: WaterFall.wxml: !--pages/WaterFall/WaterFall.wxml--view image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.pic}}" bindload="onImageLoad"/image/viewscroll-view scroll-y……

码小辫

农秀杰 提供上传

资源
38
粉丝
2
喜欢
140
评论
12

Copyright 2018-2021 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com