一、概念定位

1、概念

百度百科里介绍微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户只需要扫一扫或者搜一下即可打开应用。

2、优点

（1）、脱离公众号、朋友圈、群聊、私聊等旧有框架，自由创建游戏规则：

（2）、无需下载；

（3）、审核宽松（这条是在网上看到的，待核实）

二、小程序的文件组成

1、基本构成

一个小程序的源文件包含页面、样式、js处理、配置信息，说白点，无非就是wxml、wxss、js、json四种类型文件。在这里，文件名需保持一致，所以在命名时就要确认好，否则后面更改文件名会报错找不到该文件。

2、组件与接口

微信小程序官方提供了很丰富的组件和接口供我们使用。

（1）组件：视图容器、基础内容、表单组件、导航、媒体组件、地图、画布；

（2）接口：网络、媒体、数据缓存、位置、设备、界面、开放接口、更新、worker、数据上报、wxml、地图、系统、第三方平台、画布、调试、基础、转发、路由、定时器；

以上便是微信官方提供的接口和组件，在实际项目中，根据自己的需求来使用这些组件和接口。

三、下面说说我在“智学商城”小程序项目中遇到的坑，把它记录下来供大家借鉴。

1.关键词绑定的进度条，切换手机型号后，进度条到不了顶端。

调试了很久，请教同桌说是我没有用rpx的缘故，结果我换成rpx后，依然实现不了，我们三个人三个算法，但依然这个bug存在

2.弹性盒子布局问题，开始写别的页面没有遇到，一般都是不换行横向分布justify-content:space-around，这条代码就很好的实现需求，如果需要左右两端顶头的就把around换成between就好，但是写到进度条下面的商品列表的时候，我给每一个商品小盒子设置宽度不足50%，想要让其实现横排两个商品，结果要么就是一个商品，要么就是两个半商品，最后尝试多次实现效果，如下：

根据尝试总结经验如下：

关于弹性布局，需要换行的因素：1.flex-wrap：wrap；设置为换行，justify-content规定了对齐方式，这两条都是写在父级盒子display属性为flex之下的，子集盒子需要做的就只是规定好宽度。

3.关于图片路径，就是购物车中的全选两张图片切换，我本来想用背景图片来做，结果加载路径的时候会报错——本地图片加载错误。后来还是用的image做的就没报错，做完了之后我上网查了一下这个问题，人家给出的3种解决办法，第一是将背景图片的路径换成远程网址，即网络图片；第二种是使用base64格式编码的图片；第三种是使用<image>实现。

以上便是我此次项目中遇到的奇葩问题，不足之处请大佬指点。