关于小程序的一些新的心得体会

深藏阁楼爱情的钟 2022-05-14 08:47 673阅读 0赞

作为一名Java开发人员的我，如果说对于前端有一些心得体会，那肯定是要归功与小程序的。在自己实习阶段，公司秉承着Java也要会前端的理念，让我开始小程序的开发。当时自己完全是一脸懵逼。那么我们来看一下，一路走来，我都经历了什么........

当时我们的技术总监对我进行了半个小时的小程序开发培训，就让我去开发了。我依稀的记得他跟说这么几点东西：

1.小程序中没有div这个标签，使用view代替，其他的大致相同。

2.页面布局自己去看Flex布局。

3.JS代码编写跟H5差不多，小程序拥有一些自己的API。

然后美工发给我一张首页的图。怎么说呢？现在看来其实很简单。但是当时完全不知道怎么搞。只能硬着头皮去弄了。

那么开始界面：

到现在做了六个小程序，也看了不少别人的小程序，大致都是这样(个人总结，不当请多指教)：

1.保证间距（不同板块之间的间距，字体间距，要知道 padding 和 margin）

2.对齐（图片和图片，字体和图片等等 要知道 左对齐，右对齐，居中对齐）

3.柔和（页面不能看着太生硬，要有一些阴影，板块要用一些 border-radius来柔和边角）

4.尺寸（字体的大小，图片的自适应 要知道image中有mode这个属性，要知道rpx和px在小程序中哪个用的多）

5.动画（如果保证上面几点，其实页面整体看上去就会整齐，这也是一种美观。如果在整齐的基础上在做一些动画效果就更好了）

6:复用（这一点其实是代码整合上的，但我觉得这是一种内在的美，WXSS里面的样式最好统一整合，不要每个page里面写一些已经存在的样式）

那么布局还是推荐：flex布局，大家可以百度查阅一些资料学习一下。

页面和后台的交互：

1.不同于H5，小程序中的事件bindtap="事件名"，这里事件名后面不带括号。传参使用data-自定义名称="要传递的值"。

2.长按，左滑，右滑事件这里就不说了。

3.嵌套循环的时候要自定义下表，不然数据会乱掉

4.一些组件会有一些独有的方法，这些方法就需要我们去API中进行了解，比如switch开关事件，按钮绑定form表单提交事件,picker日期或者省市区联动的事件

那么再聊一聊JS：

小程序中的JS跟H5并无太大的区别。但是自带的API是我们需要去熟悉的，这些东西我们都可以在官方文档上查阅的到。说一些自己踩的坑：

1.请求异步（在17年的时候，那时候Promise需要我们自己导入JS文件，当时我也没有导入，解决这个问题就是在每个请求的成功的回调函数中写新的请求来保证同步）

2.时间戳（由于后端返回的是时间戳，最初的时候每次都是在JS中for循环进行转换，后来发现filter这个东西，可以直接在界面上进行转换）

3.封装（现在对于一些已知的且常见的方法，我都会进行封装一下，比如request请求，调用Modal提示框，一些方法工具(时间日期转换)，每个项目中都会有一些业务逻辑是相似的，提取出来然后调用是一种很好的习惯）

4.分离（这个不知道是否合适，我个人喜欢，把整个项目的所有请求单独写到一个JS中，把所以逻辑处理也写到另一个新的JS中，然后其他JS使用require进行方法的调用。然后使用moudle.export将方法暴露出去。

![70][]

其他：

1.因为小程序大小限制为2M，所以我们代码要精炼，复用，图片尽量放在服务器上

2.小程序的样式在安卓手机和苹果手机上会有差异，可能个别地方需要微调

3.小程序的发布需要时Https请求，且域名不能带端口

4.小程序不像公众号文章可以转发到其他平台，只能在微信中打开

5.小程序之间可以互相跳转，通过wx.navigateToMiniProgram来实现

6.在小程序的开发中，很多功能不能像APP那般设计，因为他们之间的承载力还有有差异的

更多文章请关注公众号：每天学Java。想获得更多最新面试提醒请进入小程序：每天学Java

公众号二维码：                                                                                          小程序二维码：

![70 1][]                       ![70 2][]

[70]: /images/20220514/aa3bc8cd0d1745b6948b3ea183cedaaf.png
[70 1]: https://img-blog.csdn.net/20180821214620778?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQyMjcwNjM2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20220514/4721e219757c449484be9cf569177ff8.png