目录
在开始之前,你需要准备
下载微信小程序开发者工具
用 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脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

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

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

微信朋友圈能看到访客吗 微信朋友圈能看到访客吗 May 06, 2024 pm 01:30 PM

1、微信是一款注重隐私保护的社交平台,用户无法查看谁访问了自己的朋友圈或个人主页。2、这种设计意在保护用户隐私,避免潜在的骚扰或窥探行为。3、用户只能看到朋友圈的点赞和评论记录,进一步保障了个人信息的保密性。

传言称'iPhone 16 可能不支持微信”,苹果中国区技术顾问称正与腾讯沟通应用商店抽成事宜 传言称'iPhone 16 可能不支持微信”,苹果中国区技术顾问称正与腾讯沟通应用商店抽成事宜 Sep 02, 2024 pm 10:45 PM

感谢网友情切琛思、HH_KK、石原里美幸福、华南吴彦祖的线索投递!9月2日消息,近期有传言称“iPhone16可能不支持微信”,对此贝壳财经记者致电苹果官方热线,苹果中国区技术顾问回应称,关于iOS系统或苹果设备能否继续使用微信,以及微信能否继续在苹果应用商店上架和下载的问题,需要苹果公司与腾讯之间进行沟通和探讨,才能确定之后的情况。软件应用商店及微信问题说明软件应用商店技术顾问指出,软件在苹果商店上架可能需要开发者支付费用。达到一定下载量后,后续下载需向苹果支付相应费用。苹果正与腾讯积极沟通,

deepseek生成图片教程 deepseek生成图片教程 Feb 19, 2025 pm 04:15 PM

DeepSeek:强大的AI图像生成利器!DeepSeek本身并非图像生成工具,但其强大的核心技术为众多AI绘画工具提供了底层支持。想知道如何利用DeepSeek间接生成图片吗?请继续阅读!利用基于DeepSeek的AI工具生成图像:以下步骤将引导您使用这些工具:启动AI绘画工具:在您的电脑、手机浏览器或微信小程序中搜索并打开一个基于DeepSeek的AI绘画工具(例如,搜索“简单AI”)。选择绘画模式:选择“AI绘图”或类似功能,并根据您的需求选择图片类型,例如“动漫头像”、“风景

微信删了的聊天记录怎么恢复 微信删了的聊天记录怎么恢复 May 06, 2024 pm 01:29 PM

1、要恢复已删除的微信聊天记录,需要使用两台手机进行数据迁移。2、在旧手机上,依次点击【我】→【设置】→【聊天】→【聊天记录迁移与备份】。3、选择【迁移】并设定目标设备平台,选择需要恢复的聊天记录后,点击【开始】。4、随后在新手机上登录同一账号并扫描旧手机二维码,即可启动迁移。5、迁移完成后,已删除的聊天记录将恢复到新手机中。

微信背景图怎么设置 微信背景图怎么设置 Apr 26, 2024 am 11:01 AM

1、打开微信app,点击界面底部的【我】,选择【设置】功能。2、点击【聊天】,点击【聊天背景】,进入聊天背景设置界面。3、点击【选择背景图】或【从相册中选择】或【拍一张】。4、选择并点击想要使用的图片,再点击右上角的【使用】即可。

微信零钱通安全吗 微信零钱通安全吗 Apr 29, 2024 am 10:23 AM

1、微信零钱通采用了多层安全机制,包括密码保护、实名认证、手机绑定等,以确保用户账户的安全。2、微信支付采用了多种加密方式,包括SSL加密传输、实时监控等,保障交易安全。3、微信支付还与银行和金融机构合作,实行风险控制和防范措施,对异常交易进行监测和处理。4、用户在使用微信零钱通时,也应加强个人账户的保护,设置复杂的密码、定期修改密码、不随意泄露个人信息等。

微信聊天记录怎么迁移到另一个手机 微信聊天记录怎么迁移到另一个手机 May 08, 2024 am 11:20 AM

1、在旧设备上,依次点击“我”→“设置”→“聊天”→“聊天记录迁移与备份”→“迁移”。2、选择要迁移的目标平台设备,选择需要迁移的聊天记录,点击“开始”。3、在新设备上使用同一微信账号登录并扫描二维码,即可开启聊天记录迁移。

微信删除好友怎么恢复找回聊天记录 微信删除好友怎么恢复找回聊天记录 Apr 29, 2024 am 11:01 AM

1、打开微信app,点击界面底部的【通讯录】,点击【新的朋友】。2、在页面顶部的搜索框中输入该好友的微信号或昵称。3、如果对方没有将用户删除,用户就可以在搜索结果中找到该好友。4、点击该好友进入与其的聊天窗口,即可查看之前的聊天记录。

See all articles