微信小程序开发基础知识,想要学习小程序必须看

微信小程序的开发对于很多新手来说都是一个容易上手的开发工作,我们这里用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等)来发送数据请求,并将获取到的数据展示在小程序中。

最后

想要学好微信小程序的开发上面所描述的内容非常重要。希望对您有所帮助!

相关推荐
bemyrunningdog13 分钟前
二进制权限控制方案
javascript·react.js·ecmascript
汪子熙24 分钟前
深入探析 header facets:定位与应用
前端·javascript
江城开朗的豌豆30 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
2401_8812444040 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆41 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子44 分钟前
Web开发中的文件下载
前端·javascript·面试
KaneLogger1 小时前
视频转文字,别再反复拖进度条了
前端·javascript·人工智能
程序员JerrySUN1 小时前
RK3588 Android SDK 实战全解析 —— 架构、原理与开发关键点
android·架构
前端风云志1 小时前
JavaScript中如何遍历对象?
javascript
像风一样自由202010 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html