教你提升微信小程序开发效率的步骤详解
微信小程序的 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中文网其他相关文章!

热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

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

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

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

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

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

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

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

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