下载微信小程序开发者工具用nwjs模拟的环境

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

下载微信小程序开发者工具用nwjs模拟的环境

准备

TL;博士;

当前版本的微信小程序的API实现需要考虑到方方面面，所以仍然采用编写的方式。 众所周知 -Hell 是传统 js 语法中的历史问题，但毕竟方便的工具才是开发效率的源泉。 因此，笔者对当前版本的微信小程序小程序熟悉。 小程序API由weapp简单封装。

同时微信小程序开发主要技术，微信小程序框架本身专注于交互和UI的实现，并没有提供内置的状态管理。 如果很多异步操作直接在App或者Page中一一实现的话，相信写起来会是一场噩梦，而且行不通。 方便测试，因此作者为微信小程序实现了一个基于Redux方案的状态管理模块，方便在小程序中实现应用程序状态管理 redux-weapp 。

特别是微信小程序在构建（编译）时不支持App范围之外的文件，npm在这里不太好用。 因此，我们需要在应用程序本地实时构建依赖，并在微信小程序中引用本地的依赖。 对于这种构建场景，我认为是*方便的解决方案。 大家都说COPY到本地是*方便的方式~~

安装工具和依赖模块

下载微信小程序开发工具

开发工具是nwjs模拟的环境。 其实就是微信里的环境。 不过不用担心，它们只是两个不同的VM，但本质是一样的。

nwjs可能有一些小bug，写代码的时候注意一下就可以了。

下载微信小程序开发工具

使用npm命令启动微信小程序项目

开始安装必要的依赖模块

因为除了运行小程序所需的模块外，还有构建所需的模块，看起来可能不少，但不用担心，大多数都是声明式的，不需要你直接调用它们。

为了方便经验较少的同学理解，我会一步步安装这些依赖。

代码翻译工具Babel

````外壳

npm --save-dev babel-cli babel-core babel- babel--add-- babel- babel-- babel--stage-0

````

通过上述模块，您可以在构建过程中将 ES6/7 代码翻译为 ES5 代码（事实上，解释器只识别 ES5）。

安装打包工具，

这里，我们只需要打包代码，不需要dev和hot功能，所以我们只需要安装本身，不需要安装其他扩展和插件。

安装 Redux

由于在实际应用中，我们经常需要异步调用API服务器接口下载微信小程序开发者工具用nwjs模拟的环境，因此需要redux-thunk模块来处理[]()。

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

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

创建项目目录结构如下

编写构建脚本

首先，你必须编写..js。 这是必要的。 由于本次构建是为了本地化微信小程序的依赖，所以只处理js文件。 如果需要打包其他资源如css、图片等，请自行研究。 事实上，微信小程序包有1MB的上限。

定义 npm 命令

编写应用程序代码

终于进入正题了（做好你的工作，……），借助上面提到的weapp和redux-weapp，希望你会感觉很舒服~~。

在这个例子中，我们的目标是查询 / 的开源项目并将其显示在小程序中。

myapp模块

这只是一个简单的例子。 实际上，将会有更复杂的商店形状，并且需要引入更多来处理动作和状态的变化。

它用于处理由于Store而发生的状态变化。 参数始终为 (state, )

通常是一个 Plain，总是一个 Store，描述“发生了什么，结果是什么”的逻辑

小程序模块

应用程序.json

如上定义，小程序的启动页面为

后记

示例代码尚未实际运行，仅用于表示开发步骤。 我会尽快实现完整的示例并把它放出来。

*后，感谢您耐心阅读本文！

参考

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等