微信小程序开发入门(看这篇就够啦!)

   日期:2024-12-29     作者:yindufu1      
核心提示:答:1.可在微信里面自由分享2.不用下载app,减少手机内存占用3.能使用微信的api接口快速开发 tarBar是移动端应用常

  • 1.可在微信里面自由分享
  • 2.不用下载app,减少手机内存占用
  • 3.能使用微信的api接口快速开发


  • tarBar是移动端应用常见的页面效果,用于实现多个页面的快速切换
  • 创建时:最少2个,最多5个tarBar标签页

说人话就是:导航栏

1.打开app.json文件
2.打开微信公众平台
3.将官方的tabBar格式复制进app.json
4.打开平台找tabBar相关属性配置

在微信小程序中,view标签用于布局,相当于HTML中的div。
你可以使用class属性来指定一个或多个样式类,使用style属性来写入行内样式。

在小程序中使用swiper组件可以创建滑块视图
使用时必须搭配swiper-item滑块使用

 

autoplay:是否自动播放
interval:与下一个滑块的间隔时长
circular:是否衔接滑动

 

type是必备属性,用来控制是否选中
success选中 circle未选中
size用来定义icon大小
icon详细属性请点这里了解

类似HTML中的a标签
用于跳转页面-可以传参(后面详讲

 
 
 

可以把template模板理解成一个外包公司的产品,在它之前,我们都是自己一条工序走到底,有了它之后,它的精美框架和样式,可以直接被我们使用,不仅方便而且能省去很多的力气,可谓人类之星

1.1.1 为什么需要模板

template(模板):主要用于显示,简单的说主要是用于嵌入wxml的代码,模板中是可以拥有对应的样式以及逻辑,但是他并没有属于的对应的js文件,它的逻辑依赖于引用的页面。

1.1.2 如何使用模板

导入模板框架

 

导入模板样式

 
 

1.2.1 为什么需要模块

将复杂的应用程序分解为一系列独立的模块,每个模块负责完成特定的功能或业务逻辑。

1.2.2 如何创建模块

与我们创建的js文件一样,只不过我们把特定的需要调用的数据装在js文件中,赋予了它新的名字“xx模块”
以下这个例子就是用来存储固定数据的

你可能会问了,为什么要另存这么麻烦

其实更多的是为了简洁代码页,方便编写,也方便后续的数据修改。

 

模块和普通js文件相比,最重要的是
将list数组暴露出去
module.exports={list:list}
这样外部的文件总才能调用到它

1.2.3 如何使用模块

导入模块

 

使用模块

 
 
 

小程序中的data是一个对象
页面中所涉及到的变量都要在data中定义

 
 

内容绑定

 

属性绑定

 
 

通常我们获取到有效数据,需要将有效数据追加或替换原有的数据,这时,我们需要用到数据修改,非常常用。

 

详细使用点这里查看

  • 当用户进行相应的操作(如点击、长按等)时,对应的事件就会被触发,并执行相应的事件处理函数
  • 事件处理函数:当事件被触发时,需要定义对应的事件处理函数来执行相应的逻辑。

常用的事件类型:点击(bindtap)、长按(bindlongtap)、输入(bindinput)、表单提交(bindsubmit)、滚动到底部(bindscrolltolower)和选择器改变(bindchange

这里给个栗子

 

bindtouchstart 手指触摸事件
bindtouchmove 手指触摸移动事件

 

翻译:在选择器为list的元素中,检索isTouchMove,为true则给list添加‘touch-move’样式,为false则添加“”(空

  • wx:if
  • wx:elif
  • wx.else

条件绑定数据
使用这个属性来判断是否数据绑定当前组件。

 
 

可以理解为for循环
不断遍历一个数组,并将其内容通过{{}}输出页面

 
 
 

1.1.1 URL传参

利用navigate标签
navigate标签+URL地址+参数
url=“…/…/indexDetail?id=3”

1.1.2 小程序api传参

给容器定义一个bind事件
触发时 带着参数data-id=3 传给js
wx.navigateTo +URL地址+参数
url=“…/…/indexDetail?id=3”

 

1.1.3 实现跳转的几种方法

1.2.1什么是全局变量

顾名思义:作用于全局的变量
当一个变量在多个页面使用时,为了方便调用,我们便会选择将它定义为全局变量

1.2.2使用方法

定义

 

使用

 
 

1.3.1什么是本地存储

顾名思义:存储在本地的数据 (永久保存
当我们需要一个数据永久保存在小程序页面时,我们会用到本地存储

1.3.2使用方法

 
 

wx.request({ })

向指定域名发送http请求
需要在微信小程序管理后台中加入指定域名

 
 
 
 

onLoad() 发起请求

onReady() 在页面初次渲染完成时执行
只会执行 1 次,常用于节点操作或动画交互等场景

onShow() 动态更新数据或状态

onHide 在页面处于不见状态时执行
常用于销毁长时间运行的任务,如定时器

页面下滑事件
下滑到底部触发

页面下拉事件
下拉到顶部触发

详细的请点击此处浏览

概念:将抽象得到的数据和行为(或功能)相结合,形成一个有机的整体,也就是将数据与操作数据的源代码进行有机的结合,形成“类”,其中数据和函数都是类的成员

可以抽象的理解为一个包装的过程
目的是增强安全性和简化编程更加直观清晰、方便简洁。

     本文地址:http://w.yusign.com/tjnews/3814.html    述古往 http://w.yusign.com/static/ , 查看更多
 
标签: 使用 页面 数据
特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。

举报收藏 0打赏 0
 
更多>同类生活信息

相关文章
最新文章
推荐文章
推荐图文
生活信息
点击排行
{
网站首页  |  关于我们  |  联系方式  |  用户协议  |  隐私政策  |  版权声明  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号