java全栈商业小程序开发
<p>此次开发只为学习和巩固，第一次学习开发</p><p><span style="font-size: 18pt">一、开发前需要了解：</span></p>
<p><span style="font-size: 14pt">开发框架MVVM、痛点、开源工具、VUE前端框架、微信支付模块、uni-app前端框架、小程序申请、开发工具下载、编写测试小程序、小程序结构</span></p>
<p><span style="font-size: 18px"><strong>1、什么是MVVM？</strong></span></p>
<p><span style="background-color: rgba(255, 255, 255, 1); color: rgba(255, 0, 0, 1); font-size: 14px">MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、<span style="background-color: rgba(255, 255, 255, 1); color: rgba(255, 0, 0, 1)">音频</span>、<span style="background-color: rgba(255, 255, 255, 1); color: rgba(255, 0, 0, 1)">视频</span>、<span style="background-color: rgba(255, 255, 255, 1); color: rgba(255, 0, 0, 1)">3D</span>、<span style="background-color: rgba(255, 255, 255, 1); color: rgba(255, 0, 0, 1)">动画</span>……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）<span style="background-color: rgba(255, 255, 255, 1); color: rgba(255, 0, 0, 1)">模式</span>与WPF结合的应用方式时发展演变过来的一种新型架构<span style="background-color: rgba(255, 255, 255, 1); color: rgba(255, 0, 0, 1)">框架</span>。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。</span></p>
<p><span style="font-size: 18px"><strong><span style="background-color: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1)">2、开发痛点？</span></strong></span></p>
<p><span style="font-size: 14px"><span style="background-color: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1)">缺少小程序开发案例，没开发过商业小程序，想做全栈小程序，想用Vue开发</span></span></p>
<p><span style="font-size: 14px"><span style="background-color: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1)">本人属于以上问题，单也没学过Vue框架。</span></span></p>
<p><span style="font-size: 14pt"><strong><span style="background-color: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1)">3、java全栈开源工具？</span></strong></span></p>
<p><span style="font-size: 14px"><span style="background-color: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1)"> 后台管理系统</span></span></p>
<p><span style="font-size: 14px"><span style="background-color: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1)">springMVC、mybatis、Shiro、JWT</span></span></p>
<p><span style="font-size: 14px"><span style="background-color: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1)"> 小程序（用户端）</span></span></p>
<p><span style="font-size: 14px"><span style="background-color: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1)">Uni-app、 VUE、生成原生小程序</span></span></p>
<p><span style="font-size: 14pt"><strong><span style="background-color: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1)">4、VUE前端框架</span></strong></span></p>
<p> Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。真正的做到了前后端分离。</p>
<p><span style="font-size: 14pt"><strong>5、微信支付模块</strong></span></p>
<p><span style="font-size: 18px">申报材料</span></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190816152217341-1941941134.png" alt=""></p>
<p> <span style="font-size: 18px">微信支付的资质困扰</span></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190816154415416-1444675038.png" alt=""></p>
<p><span style="font-size: 14pt">iOS限制</span></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190816155645125-239151975.png" alt=""></p>
<div>
<div><span style="font-size: 14pt"><strong>6、uni-app app</strong></span></div>
<div>uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码,可编译到Android、iOS、H5、小程序等多个平台。uni-app在跨端数量、拓展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势,解决了现有跨平台框架存在的问题。一次编译，应用于多个平台。</div>
<div><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190816161523014-118942447.png" alt="">
<p><span style="font-size: 14pt"><strong>7、学习建议</strong></span></p>
<p><span style="font-size: 14pt"><strong><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190816161654870-652802889.png" alt=""></strong></span></p>
<p><span style="font-size: 18px"><strong> 8、小程序申请及开发流程</strong></span></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190818155140011-634668198.png" alt=""></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190818155232599-506949810.png" alt=""></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190818155327323-971990569.png" alt=""></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190818155524747-1698562340.png" alt=""></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190818170200910-1382254482.png" alt=""></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190818170225554-134811350.png" alt=""></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190818170307617-919670419.png" alt=""></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190818170324581-2112076508.png" alt=""></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190818170353344-1502607682.png" alt=""></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190818170447539-1837528229.png" alt=""></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190818170525337-1350557724.png" alt=""></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190818170627999-1616302161.png" alt=""></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190818170741565-1249045503.png" alt=""></p>
<p><span style="font-size: 14pt"><strong>9、开发工具下载</strong></span></p>
<p>下载地址:<span style="color: rgba(0, 255, 0, 1)"><span style="color: rgba(0, 255, 0, 1)">https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html</span></span></p>
<p><span style="color: rgba(0, 0, 0, 1); background-color: rgba(136, 136, 136, 1)"><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190818171556030-22519826.png" alt=""></span></p>
<p><strong><span style="font-size: 14pt; color: rgba(0, 0, 0, 1)">10、编写测试小程序</span></strong></p>
<p><strong><span style="font-size: 14pt; color: rgba(0, 0, 0, 1)"><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190818171939416-1569565055.png" alt=""></span></strong></p>
<p> </p>
<p><strong><span style="font-size: 14pt; color: rgba(0, 0, 0, 1)"><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190818171921049-206114943.png" alt=""></span></strong></p>
<p><strong><span style="font-size: 14pt"> 11、小程序结构</span></strong></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190818172306539-1072368948.png" alt=""></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190818172702113-229310816.png" alt=""></p>
<p> </p>
</div>
</div>
<p><span style="font-size: 18pt"> 二、开发前的系统分析：</span></p>
<p><span style="font-size: 14pt"><strong>1.商业小程序（在线学习课堂）用例图</strong></span></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190816145608696-672065448.png" alt=""></p>
<p><span style="font-size: 14pt"><strong>2.项目架构图</strong></span></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190816145916256-497709974.png" alt=""></p>
<p><span style="font-size: 14pt"><strong>3、开发目标</strong></span></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190816150131793-1828092079.png" alt=""></p>
<p><span style="font-size: 14pt"><strong>4、前置知识</strong></span></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190816150258765-1646481519.png" alt=""></p>
<p><span style="font-size: 14pt"><strong>5、推荐课程</strong></span></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190816150451805-1303585996.png" alt=""></p>
<p><span style="font-size: 14pt"><strong>6、小程序学习路线</strong></span></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190816150814796-293284445.png" alt=""></p>
<p><span style="font-size: 14pt"><strong> 7、MVVM设计思想</strong></span></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190819170542747-728699281.png" alt=""></p>
<p>model层相当于.js（函数调用，书写）</p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190819171345581-888941710.png" alt=""></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190819171426360-1712452482.png" alt=""></p>
<p>小测试</p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190819173043391-845562365.png" alt=""></p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190819173146632-600004870.png" alt=""></p>
<p> </p>
<p> </p>
<p> <img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190819173130230-455129139.png" alt=""></p>
<p> 测试结果</p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190819173204928-275885457.png" alt=""></p>
<p>这样就基本了解了mvvm的设计思想</p>
<p>其实就是model-view-viewmodel的相互联系，写好基础函数，在页面绑定事件，执行</p>
<p> 8、引用全局样式</p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190819173456402-798850110.png" alt=""></p>
<p>要在app.wxss里面书写，要设置的样式，必须是页面里有的样式标签，统一风格</p>
<p>如果要在单个页面里引用另一个样式文件，那么就如下写法：</p>
<p>首先新建一个xcss文件</p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190819174433094-155694879.png" alt=""></p>
<p>运行结果</p>
<p><img src="https://img2018.cnblogs.com/blog/1186076/201908/1186076-20190819174501777-1422723413.png" alt=""></p>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
如果你觉得不错的话，请到小编博客首页打赏小编一包辣条呗~‘.’~<br><br>
来源：https://www.cnblogs.com/kalezhangtao/p/11364667.html
頁:
[1]