微信小程序学习2022.11.22

最新推荐文章于 2024-07-10 19:16:05 发布

zhangehb

最新推荐文章于 2024-07-10 19:16:05 发布

阅读量259

点赞数

文章标签：微信小程序学习小程序

本文链接：https://blog.csdn.net/HBzxy_/article/details/127985498

版权

1.项目基本组成结构：

【注意】：所有页面建议存放在pages目录下。

pages用来存放所有小程序的页面
utils用来存放工具性质的模块（例如：格式化时间自定义模块）
app.js小程序项目的入口文件
app.json小程序项目的全局配置文件
app.wxss小程序项目的全局样式文件
project.confing.json项目的配置文件
sitemap.json用来配置小程序及页面是否允许被微信索引

其中，每个页面由四个基本文件组成，他们分别是：

.js文件（页面的脚本文件，存放页面的数据、事件处理函数等）
.json文件（当前页面的配置文件，配置窗口的外观、表现等）
.wxml文件（页面的模板结构文件）
.wxss文件（当前页面的样式表文件）

2.json配置文件的作用

json是一种数据格式，在实际开发中，json总是以配置文件的形式出现。小程序项目中也不例外：通过不同的.json配置文件，可以对小程序项目进行不同级别的配置。

小程序项目中有4种json配置文件分别是：

项目根目录中的app.json配置文件
项目根目录中的projest.config.json配置文件
项目根目录中的sitemap.json配置文件
每个页面文件夹中的.json配置文件

3.app.json文件

app.json是当前小程序的全局文件，包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。

【注意】：sitemapLocation：用来指明sitemap.json的位置。

style:全局定义小程序组件所示用的样式版本。

页面和全局配置样式冲突时，系统会使用页面配置。

4.小程序中js文件分为三大类，分别是：

app.js,是整个小程序项目入口文件，通过调用APP（）函数来启动整个小程序
页面的.js文件，通过调用Page（）函数来创建并运行页面
普通的.js文件，是普通功能模块文件，用来封装公共函数或属性供页面使用（例如，utils里面的utils.js文件）

宿主环境简介：

1.什么是宿主环境

宿主环境（host environment）指的是程序所运行必须的依赖环境。例如：

Android是系统和IOS系统是两个不同的宿主环境。安卓版的微信App是不能在ios环境下运行的所以，Android是安卓系统的宿主环境，脱离了宿主环境的软件是没有任何意义的！

2.小程序宿主环境包含的内容

通信模型
运行机制
组件
API

3.通信的主体：

wxml模板和wxss样式工作在渲染层
js脚本工作在逻辑层

（两者之间通过微信客户端进行交互）

小程序的宿主环境---组件

1.常用的视图容器类组件

view：

普通视图区域
类似于HTML中的div，是一个块级元素
常用来实现页面的布局效果

scroll-view：

可滚动的试图区域
常用来实现滚动列表效果

swiper和swiper-item：

轮播图容器组件和轮播图item组件

2.小程序API的3大类：

事件监听API：

特点：以on开头，用来监听某些事件的触发
举例：微信。onWindowResize（function callback）监听窗口尺寸变化的事件

同步API：

特点1：以Sync结尾的API但是同步API
特点2:同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
举例：wx.setStorageSync('key','value')向本地存储中写入内容

异步API：

特点：类似于jQuery中的$.ajax(options)函数，需要通过succes、fail、complete接受调用的结果
举例：wx.request()发起网络数据请求，通过success回调函数接收数据

WXML模板语法-事件绑定

1.在事件处理函数中为data中数据赋值

通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值，示例如下：

//页面的.js文件
page({
   data:{
    count:0;
},
//修改count的值
changeCount(){
   this.setData({
      conut:this.data.count + 1
})
}
})

2.事件传参

可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字，示例代码如下：

<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>

最终：

info会被解析为参数的名字
数值2会被解析为参数的值

在事件处理函数中，通过event.target.dataset.参数名即可获取到具体参数的值，示例代码如下:


btnHandler(event){
    //dataset 是一个对象，包含了所有通过  data-* 传递过来的参数项
     console.log(event.targert.dataset)
    //通过 dataset 可以访问到具体参数的值
     console.log(event.target.dataset.info)

}

3.bindinput 的语法格式

在小程序中，通过input事件来相应文本框得输入事件，语法格式如下：

3.1.通过bindinput,可以为文本框绑定输入事件：

<input bindinput="inputHandler"></input>

3.2.在页面得.js文件中定义事件处理函数：

inputHandler(e){
    //e.detail.value  是变化后，文本框最新得值

    console.log(e.detail.value)
}

4.实现文本框和data之间得数据同步

实现步骤：

定义数据
渲染结构
美化样式
绑定input事件处理函数

定义数据：

page({
  data:{
    msg:'您好'
}
})

渲染结构：

<input value="{{msg}}" bindinput="iptHandler"></input>

美化样式：

input{
  border:1px solid #eee;
  padding:5px;
  margin:5px;
  bordeer-radius:3px;

}

绑定input事件处理函数：

//文本框内容改变事件
iptHandler(e){
   this.setData({
     //通过 e.detail.value 获取到文本框最新的值
     msg:e.detail.value
})
  
}