微信小程序开发提升效率

论坛 期权论坛     
选择匿名的用户   2021-6-2 15:47   547   0
<div class="blogpost-body" id="cnblogs_post_body">
<p>http://www.ifanr.com/minapp/790017</p>
<p>微信小程序的 API 实现需要兼顾方方面面,所以仍然使用 callback 写法。</p>
<p>众所周知,Callback-Hell(回调地狱)是传统 JS 语法上的历史问题。但毕竟称手的工具是开发效率的源泉,因此笔者对当前版本的微信小程序 API 做了简单的封装——weapp。</p>
<p>同时,微信小程序框架本身专注于交互和 UI 的实现,并未提供内置的状态管理。如果众多的异步操作都直接在 <code>App</code> 或 <code>Page</code> 中一一实现,相信开发起来会很困难,而且不易于测试。</p>
<p>因此,我又因此针对微信小程序实现了一个基于 Redux 方案的状态管理模块,用以方便的在小程序中实现应用状态管理 redux-weapp。</p>
<p>特别地,微信小程序构建(编译)时不支持从 App scope 之外 require 文件,npm 在此就不好用了。</p>
<p>所以,我们需要实时 build 依赖到应用本地,在微信小程序中引用本地的 modules。</p>
<p>对于这种构建场景,我认为 webpack 算是最方便的方案。</p>
<h3>在开始之前,你需要准备</h3>
<ul><li>从官方文档,了解微信小程序是什么;</li><li>了解 Redux 应用状态管理方案,同时它也是 Flux 架构的具体实现;</li><li>了解 JavaScript 打包工具 webpack;</li><li>了解 ES6/7 代码转译(transcompile)工具 Babel。原理是借助语法分析工具,将代码解析成抽象语法树后「重写」成最终的代码;</li><li>类似 Jest、Mocha 等 JavaScript 测试工具,可以根据需要选择。</li></ul>
<h3>安装工具和依赖模块</h3>
<h4>下载微信小程序开发者工具</h4>
<p>开发者工具是用 NW.js 模拟的环境,在微信中,则是 JavascriptCore 环境。</p>
<p>不过不用担心, 只是两个不同的 VM,本质是一样的。</p>
<p>NW.js 可能存在一些小 bug,写代码的时候注意一下就好。</p>
<h4>用 npm 命令开始一个微信小程序项目</h4>
<pre class="blockcode"><code class="hljs dos"><span class="hljs-built_in">mkdir myapp
<span class="hljs-built_in">cd myapp
npm init</span></span></code></pre>
<h3>开始安装必要的依赖模块</h3>
<p>由于除了小程序运行时需要的模块,还有构建所需要的模块。</p>
<p>看起来会比较多,不过不用担心,大多数都是声明性的,不需要你直接调用。</p>
<p>为了方便经验少些的同学理解,我将这些依赖分步安装。</p>
<p>首先是代码转译工具 Babel:</p>
<pre class="blockcode"><code class="hljs mipsasm">npm <span class="hljs-keyword">install --save-dev <span class="hljs-keyword">babel-cli <span class="hljs-keyword">babel-core <span class="hljs-keyword">babel-loader <span class="hljs-keyword">babel-plugin-add-module-exports <span class="hljs-keyword">babel-polyfill <span class="hljs-keyword">babel-preset-es2015 <span class="hljs-keyword">babel-preset-stage-0</span></span></span></span></span></span></span></span></code></pre>
<p>有了上面这些模块,就可以在构建时,将 ES6/7 的代码转译为 ES5 的代码了(其实解释器都只认 ES5)。</p>
<p>接下来,我们安装打包工具 webpack:</p>
<pre class="blockcode"><code class="hljs q">npm install webpack --<span class="hljs-built_in">save-<span class="hljs-built_in">dev</span></span></code></pre>
<p>我们只需要对代码进行打包,不需要 dev server 和 hot module replace 功能。</p>
<p>因此,我们只需要安装 webpack module 本身即可,无需安装其他扩展和插件。</p>
<p>接下来,我们来安装 Redux:</p>
<pre class="blockcode"><code class="hljs q">npm install redux redux-thunk --<span class="hljs-built_in">save-<span class="hljs-built_in">dev</span></span></code></pre>
<p>需要注意的是,由于在实际应用中,我们经常会需要异步调用 API 服务器的接口,因此我们还需要 <code>redux-thunk</code> 这个模块,来处理异步行为。</p>
<p>然后安装开发小程序的辅助模块:</p>
<pre class="blockcode"><code class="hljs q">npm install xixilive/weapp xixilive/redux-weapp --<span class="hljs-built_in">save-<span class="hljs-built_in">dev</span></span></code></pre>
<p>其中,weapp 模块是对微信小程序 API 的 wrapper,提供了更易于使用的 API,redux-weapp 是基于 Redux 对微信小程序进行状态管理。</p>
<h4>建立项目目录结构</h4>
<pre class="blockcode"><code class="hljs crystal">myapp
|- es6                <span class="hljs-comment"># 源代码
   |- myapp.js         <span class="hljs-comment"># 在app.js文件中require此文件
|- <span class="hljs-class"><span class="hljs-keyword">lib                <span class="hljs-comment"># 存放编译之后的js文件 |- pages <span class="hljs-comment"># 小程序页面定义 |- projects |- projects.js |- projects.json |- projects.wxml |- projects.wxss ... |- app.js <span class="hl
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP