微信小程序的开发对于很多新手来说都是一个容易上手的开发工作,我们这里用JavaScript来进行小程序开发工作会和使用HTML一样简单。因为语法的相似度很高,对于熟练掌握JavaScript的人来说就是洒洒水啦! 我们这里以开发路虎4S店小程序举例:
路虎4S店小程序
架构
- 学会小程序开发的架构才能迅速完成开发和学习
- 小程序由多个页面(pages)组成。
- 每个页面包括wxml、wxss、js和json文件。
页面架构
-
wxml文件:类似于HTML,用于描述页面的结构。在小程序中,将HTML标签转换成小程序的组件,例如div转换成view。
-
wxss文件:类似于CSS,用于定义页面的样式,包括颜色、字体、布局等。
-
js文件:处理页面的逻辑,包括生命周期函数和数据处理。
- onLoad生命周期函数:在页面加载时执行的函数,可以用于发送数据请求、初始化数据等。
- data对象:存储页面的数据,通过调用setData方法更新数据到视图中。
-
json文件:用于配置页面的窗口样式、导航栏样式等信息。
布局魔法 - Flex弹性布局
-
在小程序中,使用Flex弹性布局可以轻松实现页面的布局。
-
CSS布局的难点通常在于搞定布局,而Flex布局则让小程序更加简洁方便(用于HTML里面同样简单)。 (使用 display: flex;前)

(使用后)

-
二列式布局可以使用浮动(float)或Flex弹性布局来实现。
-
浮动:通过设置子元素的float属性实现两列布局。
-
Flex弹性布局:将子元素放置在一行,并通过设置flex: 1来指定主列,其他列会根据剩余宽度自动分配。
-
可以使用align-items属性控制子元素在纵向(垂直)方向上的对齐方式,如align-items: flex-end、align-items: center和align-items: flex-start。
(使用flex: 1;前)
-

(使用后)

早点学架构
- 在开发路虎4S店小程序时,建议先学习小程序的基础架构。
- 首先要了解页面架构,包括wxml、wxss、js和json文件的作用和关系。
- 掌握基础组件,如按钮(button)、表单输入框(input)、单元格(cell)等,这些组件可以提高开发效率。
- 然后可以着重关注业务模块,根据路虎4S店小程序的需求进行开发。
列表循环(List)
-
在路虎4S店小程序中,可以使用wx:for指令实现列表循环,将数据库中的数据展示出来。
-
使用标签来包裹循环的内容,并设置wx:key属性作为唯一标识,以优化性能。
-
在内部使用{{item.xxx}}来引用每个数据项的属性,例如{{item.image}}。
js
//app.js
onLaunch() {
console.log('应用启动了');
wx.request({
url: 'https://resources.ninghao.net/wxapp-case/db.json',
success:(response)=>{
// console.log(response);
this.globalData = response.data
}
})
},
//wxml
<block wx:for="{{design}}" wx:key="id">
<swiper-item>
<view class="content">
<view class="sub-header">外观</view>
<view class="header">{{item.header}}</view>
<view class="description">
{{item.description}}
</view>
<image
src="{{item.image}}"
mode="aspectFill"/>
</view>
</swiper-item>
</block>
数据请求
- 在路虎4S店小程序中,可以通过不同的方式发送数据请求。
- 可以在onLaunch生命周期函数中发送一次数据请求,使小程序启动时获取必要的数据。
- 还可以使用网络请求库(如axios、fetch等)来发送数据请求,并将获取到的数据展示在小程序中。
最后
想要学好微信小程序的开发上面所描述的内容非常重要。希望对您有所帮助!