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
})}

微信小程序学习2022.11.22相关推荐

微信小程序学习11：iconfont 网络字体图标使用（阿里巴巴）
微信小程序学习11:iconfont 网络字体图标使用(阿里巴巴) 使用方法 [1] 是直接下载图片,使用<image src="/static/images/v2.jpg" ...
微信小程序：2022强大的修复版趣味心理测试小程序源码,趣味测试引流裂变神器,流量主激励广告实现管道收益
大家还记得以前有一款趣味测嚒? 那款趣味测试可以说在当时是只要当时做小程序的基本是人手一款不过后来自从腾讯更新小程序登录接口以后,那款小程序也就和接口一起挂了那么呢现在小编就给大家发布修复过的,修 ...
微信小程序：2022全新超火超热门模板的姓氏头像制作生成微信小程序
这是一款姓氏头像小程序源码姓氏头像可以说是一个比较热门的一个东西之前小编也发过好几款姓氏头像小程序源码但是模板都太单一了,虎年哪一款在这之前还是挺好的因为检查有模板更新而且还不需要重新更新源码 ...
微信小程序：2022虎年背景全新UI头像框制作
2021马上就结束了,2022也马上到来了,虎年降至给大家带来一款以2022虎年为主的一款头像制作小程序源码前两天小编也分享过一款虎年头像框的小程序不过那款为了美观,所以就没有给那款小程序添加流 ...
微信小程序：2022虎年背景全新UI头像框制作带安全检测
不知不觉已经2022年了,记得上一次发布这款小程序还在2021 感叹时间过得还是挺快的,为什么小编又要重新发布一次这个小程序呢因为有很多小伙伴说之前的没有安全内容检测,然后审核过不去所以小编今天就 ...
微信小程序：2022虎年全新姓氏头像制作多模板微信小程序源码
这是一款姓氏头像小程序源码姓氏头像可以说是一个比较热门的一个东西小编也有在运营那么一款,不做宣传,每天靠自然搜索流量都有几百个人访问所以说,大家可以抓住这个热点,来上升一波姓氏头像不管的短视频 ...
微信小程序：2022虎年新UI春节送祝福微信小程序
昨天好像也发了一款祝福语的小程序吧,然后今天就看到很多小伙伴上线运营了这是一款网友用以前小编发过的一款端午送祝福改的一款小程序里面的背景图包括祝福语都已经修改成与虎年相关的内容了总体来说找的背景 ...
微信小程序：2022虎年春节拜年祝福语
和标题一样,该小程序的作用就是祝福语生成距离春节也不远了,可以抓住机会蹭一波流量用户可以点击直接发送祝福语给好友,分享的时候会显示用户名字可以自动识别用户头像和名字,用户黏度比较高小程序源码下 ...
微信小程序学习（2）-云开发
微信小程序-云开发微信小程序学习(1) 微信小程序学习(2) 文章目录微信小程序-云开发初始化+云函数的坑云函数使用老陈段子小程序云存储小程序云数据库初始化插入简单查询更新数据删 ...

微信小程序学习2022.11.22