目录
在开始之前,你需要准备
下载微信小程序开发者工具
用 npm 命令开始一个微信小程序项目
开始安装必要的依赖模块
目录结构" >建立项目目录结构
编写构建脚本
定义 npm 命令
首页 微信小程序 小程序开发 教你提升微信小程序开发效率的步骤详解

教你提升微信小程序开发效率的步骤详解

May 04, 2017 am 10:23 AM

微信小程序的 API 实现需要兼顾方方面面,所以仍然使用 callback 写法。

众所周知,Callback-Hell(回调地狱)是传统 JS 语法上的历史问题。但毕竟称手的工具是开发效率的源泉,因此笔者对当前版本的微信小程序 API 做了简单的封装——weapp。

同时,微信小程序框架本身专注于交互和 UI 的实现,并未提供内置的状态管理。如果众多的异步操作都直接在 App 或 Page 中一一实现,相信开发起来会很困难,而且不易于测试。

因此,我又因此针对微信小程序实现了一个基于 Redux 方案的状态管理模块,用以方便的在小程序中实现应用状态管理 redux-weapp。

特别地,微信小程序构建(编译)时不支持从 App scope 之外 require 文件,npm 在此就不好用了。

所以,我们需要实时 build 依赖到应用本地,在微信小程序中引用本地的 modules。

对于这种构建场景,我认为 webpack 算是最方便的方案。

在开始之前,你需要准备

  • 从官方文档,了解微信小程序是什么;

  • 了解 Redux 应用状态管理方案,同时它也是 Flux 架构的具体实现;

  • 了解 JavaScript 打包工具 webpack;

  • 了解 ES6/7 代码转译(transcompile)工具 Babel。原理是借助语法分析工具,将代码解析成抽象语法树后「重写」成最终的代码;

  • 类似 Jest、Mocha 等 JavaScript 测试工具,可以根据需要选择。

安装工具和依赖模块

下载微信小程序开发者工具

开发者工具是用 NW.js 模拟的环境,在微信中,则是 JavascriptCore 环境。

不过不用担心, 只是两个不同的 VM,本质是一样的。

NW.js 可能存在一些小 bug,写代码的时候注意一下就好。

用 npm 命令开始一个微信小程序项目

mkdir myappcd myapp
npm init
登录后复制

开始安装必要的依赖模块

由于除了小程序运行时需要的模块,还有构建所需要的模块。

看起来会比较多,不过不用担心,大多数都是声明性的,不需要你直接调用。

为了方便经验少些的同学理解,我将这些依赖分步安装。

首先是代码转译工具 Babel:

npm install --save-dev babel-cli babel-core babel-loader babel-plugin-add-module-exports babel-polyfill babel-preset-es2015 babel-preset-stage-0
登录后复制

有了上面这些模块,就可以在构建时,将 ES6/7 的代码转译为 ES5 的代码了(其实解释器都只认 ES5)。

接下来,我们安装打包工具 webpack:

npm install webpack --save-dev
登录后复制

我们只需要对代码进行打包,不需要 dev server 和 hot module replace 功能。

因此,我们只需要安装 webpack module 本身即可,无需安装其他扩展和插件。

接下来,我们来安装 Redux:

npm install redux redux-thunk --save-dev
登录后复制

需要注意的是,由于在实际应用中,我们经常会需要异步调用 API 服务器的接口,因此我们还需要 redux-thunk 这个模块,来处理异步行为

然后安装开发小程序的辅助模块:

npm install xixilive/weapp xixilive/redux-weapp --save-dev
登录后复制

其中,weapp 模块是对微信小程序 API 的 wrapper,提供了更易于使用的 API,redux-weapp 是基于 Redux 对微信小程序进行状态管理。

建立项目目录结构

myapp
 |- es6                # 源代码
   |- myapp.js         # 在app.js文件中require此文件
 |- lib                # 存放编译之后的js文件
 |- pages              # 小程序页面定义
   |- projects
     |- projects.js
     |- projects.json
     |- projects.wxml
     |- projects.wxss
   ...
 |- app.js             # 小程序入口文件
 |- app.json
 |- app.wxss
 |- webpack.config.js  # webpack配置文件
登录后复制

编写构建脚本

首先得写 webpack.config.js, 这个是必须的。

由于这个构建是为了本地化微信小程序的依赖,因此我们只处理 JS 文件。若需要打包其他资源,请读者自行研究。

而且,值得注意的是,微信小程序包有 1 MB 的上限。

// webpack.config.jsvar path = require('path'), webpack = require('webpack')var jsLoader = {
  test: /\.js$/, // 你也可以用.es6做文件扩展名, 然后在这里定义相应的pattern
  loader: 'babel',
  query: {    // 代码转译预设, 并不包含ES新特性的polyfill, polyfill需要在具体代码中显示require
    presets: ["es2015", "stage-0"]
  },  // 指定转译es6目录下的代码
  include: path.join(dirname, 'es6'),  // 指定不转译node_modules下的代码
  exclude: path.join(dirname, 'node_modules')
}module.exports = {  // sourcemap 选项, 建议开发时包含sourcemap, production版本时去掉(节能减排)
  devtool: null,  // 指定es6目录为context目录, 这样在下面的entry, output部分就可以少些几个`../`了
  context: path.join(dirname, 'es6'),  // 定义要打包的文件  // 比如: `{entry: {out: ['./x', './y','./z']}}` 的意思是: 将x,y,z等这些文件打包成一个文件,取名为: out  // 具体请参看webpack文档
  entry: {
    myapp: './myapp'
  },

  output: {    // 将打包后的文件输出到lib目录
    path: path.join(dirname, 'lib'),    // 将打包后的文件命名为 myapp, `[name]`可以理解为模板变量
    filename: '[name].js',    // module规范为 `umd`, 兼容commonjs和amd, 具体请参看webpack文档
    libraryTarget: 'umd'
  },  module: {
    loaders: [jsLoader]
  },

  resolve: {
    extensions: ['', '.js'],    // 将es6目录指定为加载目录, 这样在require/import时就会自动在这个目录下resolve文件(可以省去不少../)
    modulesDirectories: ['es6', 'node_modules']
  },

  plugins: [    new webpack.NoErrorsPlugin(),    // 通常会需要区分dev和production, 建议定义这个变量    // 编译后会在global中定义`process.env`这个Object    new webpack.DefinePlugin({      'process.env': {        'NODE_ENV': JSON.stringify('development')
      }
    })
  ]
}
登录后复制

定义 npm 命令

首先是代码测试命令 test

由于我喜欢用 Jest,所以这里也用 Jest 做范例。

// package.json"scripts": {  "pretest": "eslint es6", //推荐进行静态检查  "test": "jest",
  ...
},
...,// jest允许在package.json中定义配置"jest": {  "automock": false,  "bail": true,  "transform": {    ".js": "/node_modules/babel-jest" //用babel转译
  },  "testPathDirs": [    "/tests/"
  ],  "testRegex": ".test.js$",  "unmockedModulePathPatterns": [    "/node_modules/"
  ],  "testPathIgnorePatterns": [    "/node_modules/"
  ]
}
登录后复制

接下来,就是激动人心的 build 命令。成败在此一举

以上是教你提升微信小程序开发效率的步骤详解的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

欧易交易所app国内下载教程 欧易交易所app国内下载教程 Mar 21, 2025 pm 05:42 PM

本文提供国内安全下载欧易OKX App的详细指南。由于国内应用商店限制,建议用户通过欧易OKX官方网站下载App,或使用官网提供的二维码扫描下载。下载过程中,务必核实官网地址,检查应用权限,安装后进行安全扫描,并启用双重验证。 使用过程中,请遵守当地法律法规,使用安全网络环境,保护账户安全,警惕诈骗,理性投资。 本文仅供参考,不构成投资建议,数字资产交易风险自负。

H5和小程序与APP的区别 H5和小程序与APP的区别 Apr 06, 2025 am 10:42 AM

H5、小程序和APP的主要区别在于:技术架构:H5基于网页技术,小程序和APP为独立应用程序。体验和功能:H5轻便易用,功能受限;小程序轻量级,交互性好;APP功能强大,体验流畅。兼容性:H5跨平台兼容,小程序和APP受平台限制。开发成本:H5开发成本低,小程序中等,APP最高。适用场景:H5适合信息展示,小程序适合轻量化应用,APP适合复杂功能应用。

公司安全软件与应用冲突怎么办?HUES安全软件导致常用软件无法打开如何排查? 公司安全软件与应用冲突怎么办?HUES安全软件导致常用软件无法打开如何排查? Apr 01, 2025 pm 10:48 PM

公司安全软件与应用兼容性问题及排查方法许多企业为了保障内网安全,会安装安全软件。然而,安全软件有时...

H5和小程序如何选择 H5和小程序如何选择 Apr 06, 2025 am 10:51 AM

H5和小程序的选择取决于需求。对于跨平台、快速开发和高扩展性的应用,选择H5;对于原生体验、丰富功能和平台依附性的应用,选择小程序。

H5页面制作和微信小程序有什么不同 H5页面制作和微信小程序有什么不同 Apr 05, 2025 pm 11:51 PM

H5更灵活,可定制性强,但需要娴熟的技术;小程序上手快,维护便捷,但受限于微信框架。

币安虚拟币怎么买进卖出详细教程 币安虚拟币怎么买进卖出详细教程 Mar 18, 2025 pm 01:36 PM

本文提供2025年更新的币安虚拟货币买卖简明指南,详细讲解了在币安平台上进行虚拟货币交易的操作步骤。指南涵盖了法币购买USDT、币币交易购买其他币种(如BTC)以及卖出操作,包括市价交易和限价交易两种方式。 此外,指南还特别提示了法币交易的支付安全和网络选择等关键风险,帮助用户安全、高效地进行币安交易。 通过本文,您可以快速掌握在币安平台上买卖虚拟货币的技巧,降低交易风险。

全国首个双核文旅数智人!腾讯云助力花果山景区接入DeepSeek 让'齐天大圣”更智能、更有温度 全国首个双核文旅数智人!腾讯云助力花果山景区接入DeepSeek 让'齐天大圣”更智能、更有温度 Mar 12, 2025 pm 12:57 PM

连云港花果山景区携手腾讯云,推出文旅行业首个“双核大脑”数智人——齐天大圣!3月1日,景区正式将齐天大圣接入DeepSeek平台,使其同时具备腾讯混元和DeepSeek两大AI模型能力,为游客带来更智能、更贴心的服务体验。花果山景区此前已基于腾讯混元大模型推出了数智人齐天大圣。此次腾讯云进一步利用大模型知识引擎等技术,为其接入DeepSeek,实现“双核”升级。这使得齐天大圣的互动能力更上一层楼,响应速度更快,理解能力更强,也更具温度。齐天大圣拥有强大的自然语言处理能力,能够理解游客各种提问方式

企业微信中的JS资源缓存问题如何解决? 企业微信中的JS资源缓存问题如何解决? Apr 04, 2025 pm 05:06 PM

企业微信的JS资源缓存问题探讨在进行项目功能升级时,常常会遇到部分用户未能成功升级的情况,尤其是在企�...

See all articles