微信小程序的API实现需要考虑所有方面，因此仍然使用编写方法。
众所周知，-Hell（回调地狱）是传统JS语法中的历史问题。但是毕竟，称为“手”的工具是开发效率的来源，因此作者只是封装了当前版本的微信小程序API。
同时，微信小程序框架本身专注于交互和UI的实现，并且不提供内置的状态管理。如果直接在App或Page中一对一地直接实现许多异步操作，我相信这将很难开发并且不容易测试。
因此，我为微信小程序实现了基于解决方案的状态管理模块，以促进小程序-中的应用程序状态管理。
特别是，微信小程序在构建（编译）时不支持应用程序外部的文件，因此npm在这里不容易使用。
因此，我们需要实时依赖本地应用程序，并在微信小程序中引用本地应用程序。
对于这种构造方案，我认为这是最方便的解决方案。
在开始之前，您需要准备安装工具和相关模块以下载微信小程序开发者工具
开发人员工具是由NW.js模拟的环境，在微信中它是环境。
但是不用担心，它只是两个不同的VM，本质是相同的。
NW.js可能有一些小错误，编写代码时请注意。
使用npm命令启动微信小程序项目
mkdir myappcd myapp
npm init
开始安装必要的依赖模块
除了运行该小程序所需的模块之外，还有构造所需的模块。
似乎更多，但是不用担心，它们大多数是声明性的，不需要您直接调用它们。
为了促进对经验不足的学生的理解，我逐步安装了这些依赖项。
首先是代码翻译工具：
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代码（实际上，解释器只能识别ES 5）。
接下来，我们安装打包工具：
npm install webpack --save-dev
我们只需要打包代码，不需要开发和热功能。
因此，我们只需要自行安装即可，而无需安装其他扩展程序和插件。
接下来，让我们安装：
npm install redux redux-thunk --save-dev
应该注意的是，在实际应用中，我们经常需要异步调用API服务器接口，因此我们也需要-这个模块来处理异步行为。
然后安装用于开发小程序的辅助模块：
npm install xixilive/weapp xixilive/redux-weapp --save-dev
其中，该模块用于微信小程序API，基于微信小程序的状态管理，提供了易于使用的API。
创建项目目录结构
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配置文件
编写构建脚本
首先，您必须编写..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命令
首先是代码测试命令测试。
由于我喜欢使用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/"
]
}
接下来，有一些令人兴奋的命令。一次成功或一次失败
以上内容是教给您提高微信小程序开发效率的步骤的详细内容。有关更多详细信息，请注意php中文网站上的其他相关文章！
免责声明：本文最初发布在php中文网站上。请注明转载来源。谢谢您的尊重！如有任何疑问，请与我们联系