uni-app开发微信小程序的简要流程

心已赠人 2021-10-06 04:04 617阅读 0赞

## uni-app开发微信小程序 ##

开发uni-app的技术条件就是微信小程序及Vue，不熟悉vue的同学要先学习了解一下。不熟悉小程序可以直接看uni文档。[https://uniapp.dcloud.io/frame][https_uniapp.dcloud.io_frame]  
其他博客：  
vue+element:[https://blog.csdn.net/weixin\_42618191/article/details/100586437][https_blog.csdn.net_weixin_42618191_article_details_100586437]  
vue-element-admin:[https://blog.csdn.net/weixin\_42618191/article/details/102610157][https_blog.csdn.net_weixin_42618191_article_details_102610157]  
vue常见/高级功能：[https://blog.csdn.net/weixin\_42618191/article/details/107487526][https_blog.csdn.net_weixin_42618191_article_details_107487526]  
**1. 开发工具调试**

打开**微信开发工具-**–>设置—>安全—>开启服务端口（微信开发者工具最新版）  
进入**XHbuilder**，点击工具—>设置，找到微信开发者工具安装目录，设置启动地址（安装插件：工具—>插件安装）  
（如果是**开发支付宝小程序**就需要自己打开生成的代码包，运行到支付宝开发者工具的时候编译平台会提示在哪个路径）  
以上设置完成后就可在代码开发后点击运行，就能自主选择运行到哪端进行查看调试了。在编辑器中进行修改后不用重新运行，小程序开发者工具会自动更新，如果没有变化，点击重新运行即可：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70]  
详细流程介绍：[https://uniapp.dcloud.io/quickstart][https_uniapp.dcloud.io_quickstart]

**2. 开发项目配置**

项目目录的manifest.json ，配置小程序AppID等。  
项目目录的pages.json，配置页面路由（pages数组），配置应用的状态栏、导航条、标题、窗口背景色（globalStyle对象）， 配置 tabBar 内容。这个开发过小程序的朋友来说是差不多的。不过uni-app的每个页面是没有自己对应json文件的，都在公共的page.json中设置。列如开启下拉刷新  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 1]  
官方文档有详细介绍：[https://uniapp.dcloud.io/collocation/pages][https_uniapp.dcloud.io_quickstart]

**3.公共文件**

在components中建立公共的文件  
common.js的代码地址：https://github.com/lady-mei/uni-app-common.js  
![components][]  
在**main.js中**引入公共文件或方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 2]  
**4. 微信登录及获取用户信息**

在公共的js文件中定义**登录的方法**![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 3]  
**获取用户信息进行解密的方法**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 5]  
其他方法后续添加。。。。。。  
以上为个人开发项目的经验，有不对的或者更优方法的十分希望可以指点一二。谢谢！

[https_uniapp.dcloud.io_frame]: https://uniapp.dcloud.io/frame
[https_blog.csdn.net_weixin_42618191_article_details_100586437]: https://blog.csdn.net/weixin_42618191/article/details/100586437
[https_blog.csdn.net_weixin_42618191_article_details_102610157]: https://blog.csdn.net/weixin_42618191/article/details/102610157
[https_blog.csdn.net_weixin_42618191_article_details_107487526]: https://blog.csdn.net/weixin_42618191/article/details/107487526
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70]: /images/20211006/86d045296d8c4f6a95805e296378412c.png
[https_uniapp.dcloud.io_quickstart]: https://uniapp.dcloud.io/quickstart
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 1]: /images/20211006/2928a48b9672491383cee513b4c618c8.png
[components]: /images/20211006/5ae967494a3c47be8a0467924068581f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 2]: /images/20211006/4e18262107404503a5f342c80edb8645.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 3]: /images/20211006/542aea6cd78642a5b3f792b69e76ebdc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 4]: /images/20211006/f886310dc4f24e03bdcced89619a2c4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 5]: /images/20211006/6eb871328a33477f8bb3f25fe8cce48c.png