【小程序】微信小程序课程 -2 快速上手

春天的菠菜2024-09-27 11:37

目录

1、快速上手基本概念

[1.1 小程序常用组件](#1.1 小程序常用组件)

[1.2 tabbar配置](#1.2 tabbar配置)

[1.3 尺寸单位](#1.3 尺寸单位)

[1.4 样式](#1.4 样式)

[1.4.1 全局样式 app.wxss](#1.4.1 全局样式 app.wxss)

[1.4.2 局部样式 xx.wxss](#1.4.2 局部样式 xx.wxss)

2、首页案例

[2.1 button组件使用](#2.1 button组件使用)

[2.2 swiper + swiper-item](#2.2 swiper + swiper-item)

[2.3 tips效果](#2.3 tips效果)

[2.4 引入矢量图](#2.4 引入矢量图)

[2.5 flex（布局）](#2.5 flex（布局）)

[2.5.1 menu布局](#2.5.1 menu布局)

[2.5.2 通知布局](#2.5.2 通知布局)

[2.5.3 底部布局](#2.5.3 底部布局)

3、事件绑定

[3.1 事件绑定基本示例](#3.1 事件绑定基本示例)

[3.2 事件冒泡](#3.2 事件冒泡)

[3.3 事件对象和传参](#3.3 事件对象和传参)

4、页面跳转

[4.1 组件跳转（声明式导航）](#4.1 组件跳转（声明式导航）)

[4.2 js跳转（编程式导航）](#4.2 js跳转（编程式导航）)

5、wxml语法

[5.1 模版语法](#5.1 模版语法)

[5.2 列表渲染](#5.2 列表渲染)

[5.3 条件渲染](#5.3 条件渲染)

[6、 发送网络请求](#6、 发送网络请求)

[6.1 微信发送网络请求](#6.1 微信发送网络请求)

[6.2 显示loading提示框](#6.2 显示loading提示框)

[6.3 微信小程序开发-显示电影](#6.3 微信小程序开发-显示电影)

[6.3.1 dhango 后端接口](#6.3.1 dhango 后端接口)

[6.3.2 小程序样式](#6.3.2 小程序样式)

[7 附录：flex布局](#7 附录：flex布局)

[7.1 flex布局中的概念](#7.1 flex布局中的概念)

[7.2 容器的样式属性（container）](#7.2 容器的样式属性（container）)

[7. 2.1 flex-direction: 决定主轴的方向](#7. 2.1 flex-direction: 决定主轴的方向)

[7.2.2 align-content:定义了多根轴线的对齐方式。](#7.2.2 align-content:定义了多根轴线的对齐方式。)

[7.2.3 flew-flow-flex-direction属性和flex-wrap属性的简写属性](#7.2.3 flew-flow-flex-direction属性和flex-wrap属性的简写属性)

[7.2.4 justify-content: 定义项目在主轴上的对齐方式](#7.2.4 justify-content: 定义项目在主轴上的对齐方式)

[7.2.5 align-items定义项目在交叉轴上如何对齐](#7.2.5 align-items定义项目在交叉轴上如何对齐)

[7.2.6 align-content:定义了多根轴线对齐方式](#7.2.6 align-content:定义了多根轴线对齐方式)

[7.3 项目属性（item）](#7.3 项目属性（item）)

[7.3.1 order属性](#7.3.1 order属性)

[7.3.2 flex-grow属性](#7.3.2 flex-grow属性)

[7.3.3 flex-shrink属性](#7.3.3 flex-shrink属性)

[7.3.4 flex-basis属性](#7.3.4 flex-basis属性)

[7.3.5 flex属性](#7.3.5 flex属性)

[7.3.6 algin-self属性](#7.3.6 algin-self属性)

[7.4 案例](#7.4 案例)

[7.4.1 元素垂直居中](#7.4.1 元素垂直居中)

[7.4.2 圣杯布局](#7.4.2 圣杯布局)

[7.4.3 小米官网布局](#7.4.3 小米官网布局)

8、小技巧收藏

[8.1 格式化参数](#8.1 格式化参数)

[8.2 拼接数组](#8.2 拼接数组)

[8.3 按住alt键多个选中操作](#8.3 按住alt键多个选中操作)

[8.4 根目录创建文件](#8.4 根目录创建文件)

[8.5 全局设置导出和导入](#8.5 全局设置导出和导入)

[8.5.1 导出：](#8.5.1 导出：)

[8.5.2 导入 与应用](#8.5.2 导入 与应用)

[8.6 serializers当中外键使用depth=1获取对象](#8.6 serializers当中外键使用depth=1获取对象)

前言：快速上手微信小程序，快速搭建页面

1、快速上手基本概念

1.1 小程序常用组件

text

view

images

icon

1.2 tabbar配置

1.3 尺寸单位

1.4 样式

1.4.1 全局样式 app.wxss

app.wxss设置全局样式

1.4.2 局部样式 xx.wxss

xx.wxss是页面样式

2、首页案例

准备一个纯净的项目（略，看另一篇课文第一章）

2.1 button组件使用

2.2 swiper + swiper-item

2.3 tips效果

index.wxml

index.wxss

2.4 引入矢量图

在微信开发工具新建一个font.wxss文件，将复制的字体文件css样式复制进去

在app.wxss导入

index.wxss实现svg字体，iconfont 固定前缀 + icon-tishi(导入的font.wxcss里面找到的) icon是类名，为了设置样式

index.wxss 加入样式

2.5 flex（布局）

index.wxss设置样式

2.5.2 通知布局

index.wxss

2.5.3 底部布局

index.wxss

3、事件绑定

3.1 事件绑定基本示例

3.2 事件冒泡

3.3 事件对象和传参

4、页面跳转

4.1 组件跳转（声明式导航）

4.2 js跳转（编程式导航）

js页面

5、wxml语法

5.1 模版语法

5.2 列表渲染

for循环 wx:for ="循环对象" wx=key="Index" Index或*this

5.3 条件渲染

wx:if wx:else wx:else

wx:else wx:else 必须跟wx:if 搭配

wx:if 与hidden的区别：

hidden不删除元素

wx:if删除元素

6、 发送网络请求

开始在微信端发送网络请求，获取数据显示在小程序上

6.1 微信发送网络请求

注意：发送网络请求的域名，必须在微信公众号平台配置

---本地环境去除，只适用于开发版和体验版

开发阶段

wxhl：

复制代码 
<view class="info">  
  <block wx:for="{{chinese_list}}" wx:key="index">  
    <text class="{{item.is_mastered ? 'infoDate-red' : 'infoDate'}}">{{item.char_value}}</text>  
  </block>  
</view>

js

复制代码 
Page({

  /**
   * 页面的初始数据
   */
  data: {
    chinese_list:[]

  },

  handleGetChinese(){  
    wx.request({
      url: 'http://1接口地址',
      method: 'GET',
      data: {

      },
      header: {
        "Content-Type": 'application/json'
      },
      success: (res) =>{
        console.log(res.data.results)
        this.setData({
          chinese_list:res.data.results
        })

      },
      fail: (err) => {
        console.log(err)
      }
    })
  },

6.2 显示loading提示框

js文件 这里放在生命周期的onLoad了，进页面就加载

复制代码 
 /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.showLoading({
      title: '加载中~~~',
      mask: true
    })
    wx.request({
      url: 'http://你的接口地址',
      method: 'GET',
      data:   {       
        
    },
      header: {
        "Content-Type": 'application/json'
      },
      success: (res) =>{
        console.log(res.data.results)
        this.setData({
          chinese_list:res.data.results
        })

      },
      fail: (err) => {
        console.log(err)
      },
      complete(res){
        wx.hideLoading()
      }
    })
  },

6.3 微信小程序开发-显示电影

6.3.1 dhango 后端接口

6.3.2 小程序样式

wxml

wxss调整样式

js

7 附录：flex布局

7.1 flex布局中的概念

7.2 容器的样式属性（container）

7. 2.1 flex-direction: 决定主轴的方向

7.2.2 align-content:定义了多根轴线的对齐方式。

如果项目只有一根轴线，该属性不起作用

7.2.3 flew-flow-flex-direction属性和flex-wrap属性的简写属性

7.2.4 justify-content: 定义项目在主轴上的对齐方式

7.2.5 align-items定义项目在交叉轴上如何对齐

7.2.6 align-content:定义了多根轴线对齐方式

如果项目只有一根轴线，改属性不起作用

7.3 项目属性（item）

7.3.1 order属性

7.3.2 flex-grow属性

7.3.3 flex-shrink属性

7.3.4 flex-basis属性

7.3.5 flex属性

7.3.6 algin-self属性

7.4 案例

7.4.1 元素垂直居中

7.4.2 圣杯布局

7.4.3 小米官网布局

8、小技巧收藏

8.1 格式化参数

注意是tab上面的 ` 符号(英文下）

复制代码 
console.log(`添加 [${item.char_value}] 成功`)

8.2 拼接数组

8.3 按住alt键多个选中操作

8.4 根目录创建文件

选择根目录一个文件，再点新建文件

8.5 全局设置导出和导入

8.5.1 导出：

8.5.2 导入 与应用

根据导入所在文件设置这个../

8.6 serializers当中外键使用depth=1获取对象

结果

相关推荐
三原8 小时前
7000块帮朋友做了2个小程序加一个后台管理系统，值不值？
前端·vue.js·微信小程序
Byte_Me9 小时前
IoT 小程序：如何破解设备互联的碎片化困局？
物联网·小程序·iot
小徐_233311 小时前
uni-app 弹窗总被父元素“绑架”？3招破局，H5/小程序/APP一招通杀！
前端·微信小程序·uni-app
難釋懷16 小时前
微信小程序案例 - 本地生活（首页）
微信小程序·生活·notepad++
2501_915921431 天前
没有Mac如何完成iOS 上架：iOS App 上架App Store流程
android·ios·小程序·https·uni-app·iphone·webview
说私域1 天前
基于定制开发开源AI智能名片与S2B2C商城小程序的旅游日志创新应用研究
人工智能·小程序·旅游
脑袋大大的1 天前
钉钉小程序开发环境配置与前端开发指南
小程序·钉钉·企业应用开发
2301_805962931 天前
微信小程序控制空调之接收MQTT消息
微信小程序·小程序·esp32
The_era_achievs_hero1 天前
微信小程序121~130
微信小程序·小程序
難釋懷1 天前
微信小程序WXSS 模板样式
微信小程序·小程序·notepad++
热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02KGG转MP3工具|非KGM文件|解密音频03Coze扣子平台完整体验和实践（附国内和国际版对比）04身弱武修法：玄之又玄，奇妙之门05集群聊天服务器---MySQL数据库的建立06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07基于uni-app的书法学习管理小程序的设计与实现08使用Ruby接入实时行情API教程09DeepSeek各版本说明与优缺点分析10LOT: 通过逻辑增强大型语言模型的零样本Chain-of-Thought推理能力