河北省衡水市景县规划网站,wordpress首页自定义缩略图,中国建设人才服务信息网站,央视优购物官方网站前言#xff1a;本篇文章介绍微信小程序以及项目介绍#xff1a; 文章介绍#xff1a;介绍了微信小程序常用的指令、组件、api。tips#xff1a;最好按照官方文档来进行学习#xff0c;大致可以我的目录来学习#xff0c;对于写项目是没有问题的 微信小程序官方文档https… 前言本篇文章介绍微信小程序以及项目介绍 文章介绍介绍了微信小程序常用的指令、组件、api。tips最好按照官方文档来进行学习大致可以我的目录来学习对于写项目是没有问题的 微信小程序官方文档https://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.下载方式以及流程
下载流程https://blog.csdn.net/m0_70474954/article/details/127182224
2.创建步骤
2.1 首先打开软件 微信开发者工具 2.2 然后其中的 AppID 的位置
微信公众平台的开发管理里面 二、微信小程序常用介绍
微信小程序官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/
1、目录结构 2、模板语法以及指令
2.1、数据绑定
使用双大括号 {{ }} 来绑定数据。例如text{{message}}/text 会显示变量 message 的内容。
2.3、事件绑定
使用 bind 或者 bind 前缀来监听事件。例如button bindtaponTap点击我/button 会在用户点击按钮时触发 onTap 方法。
2.4、条件渲染
使用 wx:if, wx:elif, wx:else 来根据条件渲染不同的组件。例如
view wx:if{{condition}}满足条件时显示/view
2.5、列表渲染
使用 wx:for 指令来循环渲染列表。例如
view wx:for{{array}} wx:keyuniqueKeytext{{item.value}}/text
/view
3、动态更新数据
使用 setData 更新数据:
this.setData({
message: Hello Wechat!
});
4、常用组件
1.Swiper 轮播图组件
swiper 组件用于创建轮播图效果。基本属性包括
autoplay是否自动播放。interval自动播放的时间间隔。duration滑动动画时长。circular是否采用衔接滑动。
swiper autoplaytrue interval5000 duration500 circulartrueswiper-item wx:for{{imgList}} wx:key*thisimage src{{item}} modeaspectFill/image/swiper-item
/swiper
2. scroll-view 滚动视图组件
scroll-view 组件用于创建可滚动视图。基本属性包括
scroll-x允许横向滚动。scroll-y允许纵向滚动。
scroll-view scroll-ytrue styleheight: 300px;view wx:for{{list}} wx:key*thistext{{item}}/text/view
/scroll-view
3. form 表单组件
form 组件用于收集用户输入的数据。基本用法包括
bindsubmit提交表单时触发的事件。
form bindsubmitformSubmitinput nameusername placeholder请输入用户名 /button formTypesubmit提交/button
/form
4. navigator 导航组件
navigator 组件用于页面间的跳转跳。基本属性包括
url跳转的目标页面路径。open-type跳转的方式如 navigate, redirect, switchTab。
navigator url/pages/detail/detail open-typenavigate跳转到详情页/navigator
5. button 按钮组件
button 组件用于触发事件。常用属性包括
bindtap点击按钮时触发的事件。open-type开放能力如获取用户信息、获取手机号等。
button bindtaponTap open-typegetUserInfo点击我/button
6. input 输入组件
input 组件用于获取用户输入。基本属性包括
value输入的值。bindinput输入时触发的事件。
input value{{inputValue}} bindinputonInput placeholder请输入内容 /
7. picker 选择器组件
picker 组件用于选择日期、时间等。基本用法包括
mode选择器的类型如 date, time。bindchange选择变化时触发的事件。
picker modedate bindchangeonDateChange
8. checkbox 多选框组件
checkbox 组件用于多选。基本用法包括
bindchange选项变化时触发的事件。
checkbox-group bindchangecheckboxChangelabel wx:for{{checkboxItems}} wx:key*thischeckbox 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 typeprimary bind:taponButtonClick点击我/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标签来定义轮播图的每个项目。
swiperindicator-dotstrueautoplaytrueinterval5000duration500swiper-item wx:for{{imageList}} wx:keyuniqueimage src{{item}} classslide-image //swiper-item
/swiper
3、视频组件封面图
使用微信小程序的video组件并设置poster属性来指定视频的封面图。poster属性的值是封面图片的路径。
videosrcpath/to/video.mp4posterpath/to/cover.jpgcontrolstrueautoplayfalse/
五、项目中的错误
1、navigoator配置好点击不跳转
!-- 跳转到指定页面 --
navigator url/pages/target/target跳转/navigator
注意url里的路径一定要带/
六、项目展示
完整项目展示的视频https://live.csdn.net/v/437171?spm1001.2014.3001.5501
