乡愁归雁 發表於 2019-7-22 12:58:00

个人小程序应用开发指南

<h1 class="article-title" data-v-4f8894a8=""><span style="font-size: 14px">作者：HerryLo</span></h1>
<div class="article-content" data-v-4f8894a8="" data-id="5d35190b51882579cc3cdcca">
<p>原文永久链接： https://github.com/AttemptWeb/Record...</p>
<p>小程序依附于各大平台，支付宝、微信、头条、百度等小程序，都是在平台上进行开发，平台提供对应的技术支持和用户环境。对于个人开发者，这个还是蛮方便的，它本身带有流量属性，易于传播。</p>
<h2 data-id="heading-0">便捷开发</h2>
<p>最近在弄自己的小程序，所以整一篇文章总结一下。如果你已经开发过小程序，同时开发过自己的小程序，这篇文章可以不用看了。如果你想开发自己的个人应用，这篇文章会很适合你。</p>
<p>小程序开发相当的便捷，配合官方文档，微信小程序文档、支付宝小程序文档，即可在本地运行起来，如果只是单纯的展示，那只需要开发完之后上传，等待审核了。只需要一点前端基础，就可开发一个自己的小程序，有想法的同学可以行动起来。</p>
<p>如果在开发中出现问题，也可以在小程序社区求助，微信小程序社区。</p>
<p>不是在给官方推广。如果你希望开发属于自己的应用，小程序是一个可以快速入手的方案，便捷开发，快速发布，自带传播功能。下面我选中微信小程序讲解。</p>
<h2 data-id="heading-1">微信原生小程序开发</h2>
<p>微信小程序文档</p>
<div>
<pre class="hljs bash"><code class="hljs bash copyable" lang="bash">&lt;!-- 项目目录结构 --&gt;

|—— component               组件目录
|—— pages                   page页面目录
|   ......more dir         
|   |—— index               index页面
|   ||—— index.js         index.js- js逻辑文件   
|   ||—— index.json       index.json- json配置文件
|   ||—— index.wxml       index.wxml- wxml页面结构
|   ||—— index.wxss       index.wxss- wxss页面样式
|—— app.js                  全局js文件
|—— app.json                全局json配置文件
|—— app.wxss                全局样式文件
|—— project.config.json   项目配置
|—— sitemap.json            爬虫文件<span class="copy-code-btn">复制代码</span></code></pre>
</div>
<p>将项目导入到小程序开发工具中，就可以开始开发了。添加页面，直接在pages目录添加新的文件目录。具体细节参考微信小程序文档</p>
<p>语法支持：</p>
<ul>
<li>目前最新版本库已经 支持Es6 / Es7，async/await 和 Promise；</li>
<li>开发工具会将代码转换成Es5 语法，保证各种机型的样式适配；</li>
<li>部分语法类似于vue和react；</li>
</ul>
<p>组件支持：</p>
<ul>
<li>提供 template 模板支持,&nbsp;微信小程序 template模版；</li>
<li>Component自定义组件支持，组件内部存在生命周期,&nbsp;Component自定义组件；</li>
</ul>
<p>API支持：</p>
<ul>
<li>可以调用封装过的系统原生方法，比如蓝牙、网络信息、扫码等API方法；</li>
<li>常规的方法如：Storage、Reqeuest、Animation、Canvas等，更多可以查看微信小程序 API；</li>
</ul>
<p>除小程序原生开发外，当然也可以使用框架了，我个人觉得 Taro框架不错，支持多端小程序开发。</p>
<h2 data-id="heading-2">Taro开发</h2>
<p>Taro开发文档，Taro 支持多端开发，包括微信/百度/支付宝/头条小程序、H5、React-Native，目前我只使用开发过微信小程序和支付宝小程序、H5，其他的还没有尝试过。</p>
<div>
<pre class="hljs bash"><code class="hljs bash copyable" lang="bash">|—— config                              开发配置文件
|—— dist                              目标文件目录
|—— src                                 开发目录
|   |—— actions                         redux action文件
|   |—— constants                     常量文件
|   |—— pages                           page页面目录
      ......more dir
|   |   |—— index
|   |   |   |—— index.scss
|   |   |   |—— index.txs
|   |—— reducers                        redux reducers文件
|   |—— store                           redux store文件
|   |—— app.scss                        app全局样式
|   |—— app.tsx                         app全局js
|   |—— index.html                      html文件
|—— .editorconfig                     editor配置文件         
|—— .eslintrc                           eslint配置文件
|—— global.d.ts                         global配置
|—— tsconfig.json                     ts配置文件
|—— package.json
|—— project.config.json
|—— readme.md<span class="copy-code-btn">复制代码</span></code></pre>
</div>
<p>语法支持：</p>
<ul>
<li>ts 语法支持；</li>
<li>React语法规范；</li>
<li>支持使用 CSS 预编译器；</li>
<li>Es6/Es7 语法支持，如果需要更新的语法，可以在配置config配置；</li>
</ul>
<p>组件支持：</p>
<ul>
<li>react组件式开发，不过最后还是会编译成原生小程序；</li>
</ul>
<p>npm包：</p>
<ul>
<li>支持使用 npm/yarn 管理；</li>
<li>可以使用 Redux 进行状态管理；</li>
</ul>
<p>API：</p>
<ul>
<li>对小程序API、H5 API进行一次封装，更加方便；</li>
</ul>
<p>react + ts + npm包，基本就是前端开发正常节奏。不论你开发的那个小程序，只需要运行对应的命令，同时，将dist目录文件导入到开发工具中，即可看见效果。</p>
<h2 data-id="heading-3">taro和原生小程序</h2>
<p>原生小程序：上手快，对于接触过前端开发的同学，可以马上上手，基本不存在技术壁垒。面向微信小程序文档编程。</p>
<p>Taro开发：react语法规范，react组件开发，ts语法支持，支持redux。对于react有偏好的同学，强烈推荐。如果你喜欢react，建议使用Taro开发。(易于团队协作)。</p>
<h3 data-id="heading-4">小程序开发问题</h3>
<ul>
<li>
<p>微信小程序&nbsp;不可以使用cookie</p>
</li>
<li>
<p>微信小程序&nbsp;非HTTPS的域名不被支持</p>
</li>
<li>
<p>微信小程序&nbsp;分享API是同步操作，同时回调成功失败被无法监听</p>
</li>
<li>
<p>微信小程序&nbsp;wx.setStorageSync和wx.getStorageSync的API会频繁报错</p>
</li>
<li>
<p>微信小程序&nbsp;setData数据的1M限制，通过数据数据拆分可以解决</p>
</li>
<li>
<p>微信小程序&nbsp;主包的限制2M，导致无法引入过多的外部文件（使用Taro会依赖npm包）</p>
</li>
<li>
<p>微信小程序&nbsp;微信开发工具占用CPU过高，导致电脑卡顿</p>
</li>
</ul>
<p>当然问题肯定不止这些，还有微信小程序原生组件、API、官方插件等问题，这里不一一细讲了，对于想做自己小程序的同学，这些基本够用。</p>
<p>不过可能会有人问，框架不是还没有讲嘛？其实使用Tora开发小程序，你只是在使用不同的语法，在编写小程序，最后，命令工具都会将文件转换成原生小程序的文件格式。</p>
<h3 data-id="heading-5">个人应用</h3>
<p>不论你使用哪一种方式，开发你的个人应用，最后都会回归到产品本身上。通过技术完成自己心目中的个人应用，将应用提供给用户，这个才是终极目标。（技术只是手段，产品才是目标）不过我个人使用Taro开发，算是尝尝鲜。</p>
<p>废话不多说，希望个人项目源码可以帮助到大家</p>
<p>github: wxSapp 个人小程序源码</p>
<p><img class="lazyload inited loaded" src="https://user-gold-cdn.xitu.io/2019/7/21/16c1535298b4e719?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="" data-src="https://user-gold-cdn.xitu.io/2019/7/21/16c1535298b4e719?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="258" data-height="258"></p>
<p>目前正在整&nbsp;github:&nbsp;flutter 个人应用&nbsp;，有兴趣可以看看。</p>
<div>
<div>ps: 顺便推一下自己的个人公众号：Yopai，有兴趣的可以关注，每周不定期更新，分享可以增加世界的快乐</div>
<br>
<div><img src="https://i.screenshot.net/g2x6lbd" alt="img5" width="1000" height="286"></div>

</div>
</div>

</div>
<div id="MySignature" role="contentinfo">
    <p>本文来自博客园，作者：herryLo，转载请注明原文链接：https://www.cnblogs.com/liuheng/p/11225220.html</p><br><br>
来源：https://www.cnblogs.com/liuheng/p/11225220.html
頁: [1]
查看完整版本: 个人小程序应用开发指南