微信小程序介绍-以及写项目流程(重要)

前言:本篇文章介绍微信小程序以及项目介绍:

文章介绍:介绍了微信小程序常用的指令、组件、api。
tips:最好按照官方文档来进行学习,大致可以我的目录来学习,对于写项目是没有问题的

微信小程序官方文档icon-default.png?t=O83Ahttps://developers.weixin.qq.com/miniprogram/dev/framework/

想要了解更多可以关注博客⭐⭐七条小鲤鱼的博客⭐⭐

目录

一、下载以及创建项目

1.下载方式以及流程

2.创建步骤

二、微信小程序常用介绍

1、目录结构

2、模板语法以及指令

3、动态更新数据

4、常用组件

5、API

三、引入Vant Weapp组件库

1. 安装 Vant Weapp 组件库

2. 修改项目配置

4. 在页面中引入组件

5. 在页面中使用组件(测试)

四、项目中实用的功能

1、tabBar

2、轮播图

3、视频组件封面图

五、项目中的错误

1、navigoator配置好点击不跳转

六、项目展示


一、下载以及创建项目

1.下载方式以及流程

下载流程icon-default.png?t=O83Ahttps://blog.csdn.net/m0_70474954/article/details/127182224

2.创建步骤

2.1 首先打开软件 "微信开发者工具"

2.2 然后其中的 AppID 的位置

微信公众平台的开发管理里面

二、微信小程序常用介绍

微信小程序官方文档icon-default.png?t=O83Ahttps://developers.weixin.qq.com/miniprogram/dev/framework/

1、目录结构

2、模板语法以及指令

2.1、数据绑定

使用双大括号 {{ }} 来绑定数据。例如,<text>{{message}}</text> 会显示变量 message 的内容。

2.3、事件绑定

使用 bind 或者 bind 前缀来监听事件。例如,<button bindtap="onTap">点击我</button> 会在用户点击按钮时触发 onTap 方法。

2.4、条件渲染

使用 wx:if, wx:elif, wx:else 来根据条件渲染不同的组件。例如:

<view wx:if="{{condition}}">满足条件时显示</view>
2.5、列表渲染

使用 wx:for 指令来循环渲染列表。例如:

<view wx:for="{{array}}" wx:key="uniqueKey">
  <text>{{item.value}}</text>
</view>

3、动态更新数据

使用 setData 更新数据:

this.setData({
message: 'Hello Wechat!'
});

4、常用组件

1.Swiper 轮播图组件

swiper 组件用于创建轮播图效果。基本属性包括:

  • autoplay:是否自动播放。
  • interval:自动播放的时间间隔。
  • duration:滑动动画时长。
  • circular:是否采用衔接滑动。
<swiper autoplay="true" interval="5000" duration="500" circular="true">
  <swiper-item wx:for="{{imgList}}" wx:key="*this">
    <image src="{{item}}" mode="aspectFill"></image>
  </swiper-item>
</swiper>
2. scroll-view 滚动视图组件

scroll-view 组件用于创建可滚动视图。基本属性包括:

  • scroll-x:允许横向滚动。
  • scroll-y:允许纵向滚动。
<scroll-view scroll-y="true" style="height: 300px;">
  <view wx:for="{{list}}" wx:key="*this">
    <text>{{item}}</text>
  </view>
</scroll-view>
3. form 表单组件

form 组件用于收集用户输入的数据。基本用法包括:

  • bindsubmit:提交表单时触发的事件。
<form bindsubmit="formSubmit">
  <input name="username" placeholder="请输入用户名" />
  <button formType="submit">提交</button>
</form>
4. navigator 导航组件

navigator 组件用于页面间的跳转跳。基本属性包括:

  • url:跳转的目标页面路径。
  • open-type:跳转的方式,如 navigateredirectswitchTab
<navigator url="/pages/detail/detail" open-type="navigate">跳转到详情页</navigator>
5. button 按钮组件

button 组件用于触发事件。常用属性包括:

  • bindtap:点击按钮时触发的事件。
  • open-type:开放能力,如获取用户信息、获取手机号等。
<button bindtap="onTap" open-type="getUserInfo">点击我</button>
6. input 输入组件

input 组件用于获取用户输入。基本属性包括:

  • value:输入的值。
  • bindinput:输入时触发的事件。
<input value="{{inputValue}}" bindinput="onInput" placeholder="请输入内容" />
7. picker 选择器组件

picker 组件用于选择日期、时间等。基本用法包括:

  • mode:选择器的类型,如 datetime
  • bindchange:选择变化时触发的事件。
<picker mode="date" bindchange="onDateChange">
8. checkbox 多选框组件

checkbox 组件用于多选。基本用法包括:

  • bindchange:选项变化时触发的事件。
<checkbox-group bindchange="checkboxChange">
  <label wx:for="{{checkboxItems}}" wx:key="*this">
    <checkbox value="{{item.value}}" checked="{{item.checked}}"/>
    <text>{{item.name}}</text>
  </label>
</checkbox-group>

5、API

1. 界面交互API
  • 显示消息提示框 (wx.showToast): 用于显示轻提示框。
    wx.showToast({
      title: '操作成功',
      icon: 'success',
      duration: 2000
    });
  • 显示模态对话框 (wx.showModal): 用于显示需要用户确认的对话框。
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗',
      success: function(res) {
        if (res.confirm) console.log('用户点击确定');
        else if (res.cancel) console.log('用户点击取消');
      }
    });
  • 显示加载提示框 (wx.showLoading): 显示加载提示框,需要主动调用 wx.hideLoading 关闭。
    wx.showLoading({
      title: '加载中',
      mask: true
    });
    setTimeout(function () {
      wx.hideLoading();
    }, 2000);
2. 网络请求API
  • 发起网络请求 (wx.request): 用于向服务器发送请求并接收响应。
wx.request({
  url: 'https://example.com/api', // 服务器接口地址
  method: 'GET', // 请求方法,如GET、POST等
  data: {
    param1: 'value1',
    param2: 'value2'
  }, // 发送到服务器的数据
  success(res) {
    console.log(res.data); // 服务器返回的数据
  },
  fail(err) {
    console.error(err); // 错误处理
  }
});
3. 本地存储API
  • 本地存储 (wx.setStorageSync): 将数据存储到本地。
- **本地获取** (`wx.getStorageSync`): 从本地缓存中获取指定 key 的内容。
```javascript
const value = wx.getStorageSync('key');
  • 本地移除 (wx.removeStorageSync): 从本地缓存中移除指定 key 的数据。

### 4. 设备信息API
- **获取系统信息** (`wx.getSystemInfo`): 获取系统信息,如品牌、型号、操作系统版本、微信版本、屏幕宽高等。
```javascript
wx.getSystemInfo({
success(res) {
  console.log(res.model); // 如 'iPhone X'
}
});
4、生命周期
  • 页面生命周期:
    • onLoad:加载页面时调用,可以获取查询参数。
    • onShow:页面显示时调用。
    • onReady:页面初次渲染完成时调用,此时可以进行DOM操作。
    • onHide:页面隐藏时调用。
    • onUnload:页面卸载时调用。
  • 组件生命周期:
    • created:组件实例被创建时调用。
    • attached:组件被从页面节点树移除时调用。
    • ready:组件初次渲染完成时被调用。
    • moved:组件移动到节点树另一个位置时调用。
    • detached:组件从页面节点树移除时调用。

三、引入Vant Weapp组件库

1. 安装 Vant Weapp 组件库

在项目的根目录下打开命令行工具,执行以下命令来安装 Vant Weapp 组件库:

npm i @vant/weapp -S --production

这将会安装 Vant Weapp 组件库并保存到 package.json 中的 dependencies 里。

2. 修改项目配置

app.json 配置文件中,删除 style 属性中的 v2,因为 Vant Weapp 使用的是微信小程序的样式隔离模式,它不依赖于小程序的 flex 布局。

3.构建 npm 包

在微信开发者工具中,选择 "工具" -> "构建 npm",这将自动处理 npm 包并生成 miniprogram_npm 目录,里面包含了小程序可用的组件代码。

4. 在页面中引入组件

在页面的 .json 文件中,使用 usingComponents 属性来指定 Vant Weapp 组件的路径。

{
  "usingComponents": true,
  "usingAutoAudits": false,
  "usingExtendedLib": false,
  "usingPostCSS": false,
  "usingAutoAudits": false,
  "component2": true,
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
}

5. 在页面中使用组件(测试)

<van-button type="primary" bind:tap="onButtonClick">点击我</van-button>

四、项目中实用的功能

1、tabBar

  • 微信小程序的app.json配置文件中可以配置tabBar字段,用于定义底部导航栏。
  • 配置项包括list(导航列表)和color(图标默认颜色)等。
  • 每个list项包含pagePath(页面路径)、text(文字)、iconPath(未选中时的图标)和selectedIconPath(选中时的图标)等。
{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "path/to/icon.png",
      "selectedIconPath": "path/to/selected-icon.png"
    }, {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "path/to/icon.png",
      "selectedIconPath": "path/to/selected-icon.png"
    }]
  }
}

2、轮播图

  • 使用微信小程序的<swiper>组件来实现轮播图。
  • 需要在页面的.json配置文件中开启"enable": true来启用<swiper>组件。
  • .wxml文件中使用<swiper><swiper-item>标签来定义轮播图的每个项目。
<swiper
  indicator-dots="true"
  autoplay="true"
  interval="5000"
  duration="500">
  <swiper-item wx:for="{{imageList}}" wx:key="unique">
    <image src="{{item}}" class="slide-image" />
  </swiper-item>
</swiper>

3、视频组件封面图

  • 使用微信小程序的<video>组件,并设置poster属性来指定视频的封面图。
  • poster属性的值是封面图片的路径。
<video
  src="path/to/video.mp4"
  poster="path/to/cover.jpg"
  controls="true"
  autoplay="false"
  />

五、项目中的错误

1、navigoator配置好点击不跳转

<!-- 跳转到指定页面 -->
<navigator url="/pages/target/target">跳转</navigator>

注意:url里的路径一定要带"/" 

六、项目展示

完整项目展示的视频icon-default.png?t=O83Ahttps://live.csdn.net/v/437171?spm=1001.2014.3001.5501

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/929401.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Data Uncertainty Learning in Face Recognition 论文阅读

Data Uncertainty Learning in Face Recognition 论文阅读 Abstract1. Introduction2. Related Work3. Methodology3.1. Preliminaries3.2. Classification-based DUL for FR3.3. Regression-based DUL for FR3.4. Discussion of Related Works 4. Experiments4.1. Datasets an…

汽车产业数字化转型:协同创新破解挑战,平衡安全与流通

在数字经济时代的浪潮中&#xff0c;数据资源和数据信息已成为驱动各行各业转型升级的“新石油”。汽车产业&#xff0c;作为国民经济的重要支柱&#xff0c;正经历着前所未有的变革。随着数字化创新和转型的深入&#xff0c;数据在汽车全产业链中的作用和价值日益凸显。在这个…

vulnhub kioptirx1.2 超详细wp

探测 nmap --min-rate 10000 -p- 192.168.128.134 最小速率10000 nmap -sT -sV -sC -O 192.168.128.134 web打点 无弱口令 暴露cms寻找exp searchsploit LotusCMS -m 16982 [输入id号和参数m可以直接把东西复制到当前目录] 查看txt里面发现 都是xss没有rce github搜索到一个…

扫二维码进小程序的指定页面

草料二维码解码器 微信开发者工具 获取二维码解码的参数->是否登陆->跳转 options.q onLoad: function (options) {// console.log("options",options.q)if (options && options.q) {// 解码二维码携带的链接信息let qrUrl decodeURIComponent(optio…

mysql基础学习1

useradd -r -g mysql -s /bin/false mysql (-r)系统用户 不能登录 A temporary password is generated for rootlocalhost: d>#jT7rfoaz) 看是否启动 看进程 端口 直接连接 看日志 varchar (20) char(20)更耗空间 create table student_info(id int,name varchar(20),s…

Echarts使用平面方法绘制三维立体柱状图表

目录 一、准备工作 1.下载引入ECharts库 2.创建容器 二、绘制基本柱状 三、绘制立体柱状方法一 1.定义立方体形状 2.注册立方体形状 3.配置custom系列 4.设置数据 5.渲染图表 四、绘制立体柱状方法二 1.画前知识 2.计算坐标renderItem 函数 &#xff08;1&#x…

基于 MindQuantum 实现对 “天衍” 量子云平台真机的比特映射

MindQuantum 目前只支持量子模拟器&#xff0c;如果需要获得量子算法在真机上的实测数据&#xff0c;可以借助“天衍”量子云平台提供的真机。本文将介绍如何基于 MindQuantum 绘制“天衍”真机的拓扑图&#xff0c;并进而实现比特映射。 关于 MindQuantum 涉及比特映射的教程…

OpenBayes贝式计算创始人受邀参加第九届中国开源年会,分享 AI4S 前沿洞察

Open Source&#xff0c;Open Life&#xff0c;开源新生活&#xff01; 由开源社主办的第九届中国开源年会 (COSCon24) 于 2024 年 11 月 3 日在北京圆满落幕。本届大会为期 2 天&#xff0c;以 「开源新生活 - Open Source, Open Life 」 为主题&#xff0c;汇聚了来自全国各…

Day1 生信新手笔记

生信新手笔记 生信学习第一天笔记打卡。 转录组学中&#xff1a; 上游分析-基于linux&#xff0c;包括质控、过滤、比对、定量&#xff1b; 下游分析-基于R语言&#xff0c;包括差异分析、富集分析、可视化。 1. 级别标题 一个井号加空格 就是一级标题&#xff0c;两个井号加…

日拱一卒(9)——leetcode学习记录:两数组中位数

一、问题 给定两个大小分别为 m 和 n 的排序数组 nums1 和 nums2&#xff0c;要求你在 O(log(mn)) 的时间复杂度内找出这两个数组的中位数。 二、思路 时间复杂度O(log(n))代表随着操作数增加&#xff0c;剩余操作数递减&#xff0c;如二分法。 首先要建模&#xff0c;对这…

从 HTML 到 CSS:开启网页样式之旅(五)—— CSS盒子模型

从 HTML 到 CSS&#xff1a;开启网页样式之旅&#xff08;五&#xff09;—— CSS盒子模型 前言一、盒子模型的组成margin&#xff08;外边距&#xff09;&#xff1a;border&#xff08;边框&#xff09;&#xff1a;padding&#xff08;内边距&#xff09;&#xff1a;conten…

【区块链】深入理解区块链中的 Gas 机制

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 深入理解区块链中的 Gas 机制一、Gas 的基本概念1.1 为什么需要 Gas&#xff1f…

黑马JavaWeb-day06、07、08(SQL部分) _

文章目录 MYSQL概述数据模型SQL简介SQL分类 DDL数据库操作表操作 DML增&#xff08;INSERT&#xff09;改&#xff08;UPDATE&#xff09;删&#xff08;DELETE&#xff09; DQL基本查询条件查询&#xff08;where&#xff09;分组查询&#xff08;group by&#xff09;排序查询…

Kubernetes集群操作

查看集群信息&#xff1a; kubectl get nodes 删除节点 &#xff08;⽆效且显示的也可以删除&#xff09; 后期如果 要删除某个节点&#xff0c;为了不增加其他节点的访问压力&#xff0c;先增加一个节点&#xff0c;再删除要删除的节点 语法 &#xff1a;kubect delete…

基于PSO粒子群优化的CNN-LSTM-SAM网络时间序列回归预测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 2.算法运行软件版本 matlab2022a 3.部分核心程序 &#xff08;完整版代码包含详细中文注释和操作步骤视频&#xff09…

三步入门Log4J 的使用

本篇基于Maven 的Project项目&#xff0c; 快速演示Log4j 的导入和演示。 第一步&#xff1a; 导入Log4j依赖 <dependency><groupId>org.apache.logging.log4j</groupId><artifactId>log4j-api</artifactId><version>2.24.2</version&…

Redis 基础、Redis 应用

Redis 基础 什么是 Redis&#xff1f; Redis &#xff08;REmote DIctionary Server&#xff09;是一个基于 C 语言开发的开源 NoSQL 数据库&#xff08;BSD 许可&#xff09;。与传统数据库不同的是&#xff0c;Redis 的数据是保存在内存中的&#xff08;内存数据库&#xf…

3D数据大屏实现过程,使用echarts、Next.js

&#x1f4dc; 本文主要内容 数据大屏自适应方案动效 echarts&#xff1a; 3D 立体柱状图动态流光折线图 3D 地球&#xff08;飞线、柱状图&#xff09;无限滚动列表 &#x1f50d; 大屏效果 数据大屏&#xff1a; 点击预览 &#x1f579; 运行条件 next 12.3.4echarts 5.4…

标贝科技受邀出席2024东湖国际人工智能高峰论坛并入选数据要素合作伙伴名单

近日&#xff0c;备受瞩目的2024东湖国际人工智能高峰论坛在中国光谷科技会展中心隆重召开。会议以“智联世界&#xff0c;共创未来”为主题&#xff0c;省市相关单位、专家学者、产学研各界百余家联合体单位齐聚一堂&#xff0c;共话人工智能领域的最新技术及产业发展趋势。会…

unity与android拓展

一.AndroidStudio打包 1.通过Unity导出Android Studio能够打开的工程 步骤 1.设置导出基本信息&#xff1a;公司名、游戏名、图标、包名等关键信息 2.在File——>Build Settings中&#xff0c;勾选 Export Project 选项 3.点击Export 导出按钮 2.在Android Studio中打开Un…