小程序的页面，都存放在pages的目录里，以单独的文件夹存在

.js文件（页面的脚本文件，存放页面的数据，事件处理函数）

.json(当前的配置文件，配置窗口的外观）

.wxml文件（页面的模板）

.wxss文件（当前页面的样式表文件）

微信小程序——组件

1.分为九大类：（1）视图容器（2）基础容器（3）表单组件（4）导航组件（5）媒体组件

（6）map地图组件（7）canvas画布组件（8）开放能力（9）无障碍访问

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

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

（ 2）scroll-view:可以滚动的视图区域，常用来实现滚动列表效果

（3）swiper/swiper-item:轮播图容器的组件和轮播图item组件

view组件的基本使用：

使用方法跟HTML中的div一样，例子如下：

scroll-view组件的基本使用:

实现滚动：纵向滚动：scroll-y

横向滚动：scroll-x

轮播图的使用：

在最外层要放swiper的容器，有几个轮播图就放入几个项：swiper-item

swiper的常用属性：

常用基础组件：

text:文本组件，类似于HTML中的span标签，是一个行内元素;通过selectable属性，实现长按选中文本美容的效果

rich-text：富文本组件，支持把html字符串渲染为wxml结构；通过rich-text组件，把HTML字符串渲染为对应的UI结构

例如:

<view>

手机号支持长按选中的效果

<text selectable>139020932080</text>

</view>

例如

<rich-text node="<h1 style='color:red;'>标题</h1> </rich-text>

其他常用组件：

（1）button：按钮组件，功能比html中的button按钮丰富，通过open-type属性可以调佣微信各种功能（客服，转发，获取用户授权等）

（2）image：图片组件，默认宽度300培训，高度约240px

（3）Navigator:页面导航组件，类似于a链接

小程序API概述

小程序的API是由宿主环境提供的

小程序的三大类：

（1）事件监听API

特点：以on开头，用来监听某些事件的触发

举例：例：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件

（2）同步API

特点：以Sync结尾的API都是同步API，同步执行的结果可以通过函数返回值直接获取，如果执行出错会抛出异常

举例：wx.setStorageSync('key', 'value') 向本地存储中写入内容

（3）异步API

特点：类似于jQuert中的$ .ajax(option)函数，需要通过success，fail，complete接收调用结果

举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据

wxml模板语法-数据绑定

1.数据绑定的基本原则：在data中定义数据在wxml中使用数

3.Mustache语法格式(插值表达式）

把data中的数据绑定到页面中渲染，使用mustache{{}}（大括号）将比变量包起来就可以

格式：（1）<view>{{要绑定的数据}} </view>

（2）{{变量，判断条件（三元）如果使用字符串需要加引号}}

<template>

<view>{{ info }} </view>

</template>

<script>

page({

data: {

info: 'hello aorld'

}

})

</script>

Mustache语法的主要应用场景如下：

（1）绑定内容

（2）属性绑定

（3）运算（三元运算，算术运算等

动态绑定属性：

页面数据如下

page({data: {imhSrc:'http//:www.itheuma.com/image/logo,png'}})

页面的结构如下

<image Src="{{imgSrc}}" > </image>

三元运算：

页面的数据如下：

Page ({data: {randomNum:Math.random() *10  //生成10的随机数}}）

页面结构如下:

<view> {{ randomNumber >=5?'随机数大于或等于5' :'随机数小于或等于5'}}  </view>

算数运算：

页面数据结构：

Page ({data ： {randomNum:Math .randow().toFixed(2)   //生成一个带两位小数的随机数，例如0.34}}）

页面结构如下：

<view> 生成100以内的随机数： {{ randowNum *100}} </view>

wxml模板语法-事件绑定

事件是渲染层到逻辑层的通讯方式，通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务处理，

1. 小程序常用的事件;

2. 事件对象的属性列表

（1）target是触发事件的源头组件，而currentTarget则是当前事件锁所绑定的组件。

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

通过调用 this。setData(dataObject)方法，可以给页面data中的数据重新赋值。

Page（{

data： {

count：0

}，

//修改count的值

changeCount() {

this.setData({

count:this.data.count +1

})

}

}）

事件传参：

可以为组件提供data-*自定义传参，*代表传参的名字。
在事件处理函数中，通过event。target.dataset.参数名，即可获取到具体参数的值

     btnTap2(e) {this.setData({count: this.data.count + e.target.dataset.info})
},

页面结构:

<button type="warn" bindtap="btnTap2" data-info="{{2}}">+2</button>

bindinput的语法格式：

在小程序中，通过input事件来响应文本框的输入事件

inputHandler(e) {console.log(e.fetail.value)}，

页面结构：

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

实现文本框和data之间的数据同步：

实现步骤：

（1）定义数据

data： {

msg:'你好'

},

(2)渲染结构

<input value=“{{msg}}” bindinput="inputHandler"></input>

(3)美化样式

（4）绑定input事件处理函数

inputHandler（e）{

this,setData({

msg:e.fetail.value

})

}，

微信小程序--黑马程序员相关推荐

黑马程序员：福利来袭！网络安全斗鱼直播“录像+资源”大放送
不知大家是否知道,就在上周五(8月5日),黑马程序员C++学院资深讲师冰哥和知名美女老师码小趣,为大家带来了一场关于网络安全的直播盛宴! 关于直播内容如下: 一.科普网络安全知识,手把手教大家怎么 ...
微信小程序开发过程基本知识总结（引用黑马程序员）
微信小程序了解基本微信小程序开发信息: 安装微信小程序开发工具开发者工具下载路径:稳定版 Stable Build 更新日志 | 微信开放文档创建小程序: 如何修改无索引黄色感叹号提示: 图 ...
0基础跟着黑马程序员学微信小程序前端开发Day01
学习目录一.项目的基本组成结构二.小程序页面的组成部分三.创建小程序页面四.小程序的一些组件 1.常用视图容器类组件 2.常用基础内容组件 3.button 按钮的基本使用 4.image 组 ...
原生微信小程序开发-黑马优购（一）
接口文档地址: 轮播图--ShowDoc 视频地址: 黑马程序员微信小程序开发前端教程_零基础玩转微信小程序_哔哩哔哩_bilibili 后面也许可以通过快速搭建mock来获取数据(这个工作肯定要会) ...
黑马优购_微信小程序
黑马优购_微信小程序项目介绍 2021年5月6日-2021年5月12日在校参加微信小程序培训,由黑马讲师授课,能够利用微信提供的组件和API实现轮播图.授权用户信息.上拉加载更多等功能,由于之前对u ...
详细解析黑马微信小程序视频--【思维导图知识范围】
语言视频选择收录专辑链接 C 张雪峰推荐选择了计算机专业之后-在大学期间卷起来-[大学生活篇] JAVA 黑马B站视频JAVA部分的知识范围.学习步骤详解 JAVAWEB 黑马B站视频JAVAWEB ...
从一个程序员的角度看——微信小应用
前言: 最近初步了解了一下微信小应用,APP端的同事也非常感兴趣,于是在公司内部做了一个小小的分享,分享的过程中有很多讨论内容,大家也是非常感兴趣和有自己的看法,当时"混乱"的场面 ...
从程序员的角度分析微信小程序
从程序员的角度分析微信小程序我赶快在书架上拿出三年前买的书,把上面的土擦干净,压压惊. 作为一个并不是资深的程序员. 从程序员的角度分析一下微信小程序,欢迎指点. 首先 ...
一个C#程序员学习微信小程序的笔记
一个C#程序员学习微信小程序的笔记客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面. 在这个Index页面就是我们的首页,客户端在 ...

微信小程序--黑马程序员