零基础入门微信小程序（1）

一、简单认识

微信小程序，简称⼩程序，英⽂名 Mini Program ，是⼀种不需要下载安装即可使⽤的应⽤，它实现了应⽤“触⼿可及”的梦想，用户扫⼀扫或搜⼀下即可打开应⽤

优势

1.微信有海量用户，而且粘性很高，在微信⾥开发产品更容易触达用户；
2.推广App或公众号的成本太高。
3.开发适配成本低。
4.容易小规模试错，然后快速迭代。
5.跨平台。

介绍网址：https://developers.weixin.qq.com/miniprogram/introduction/

二、环境准备

1.注册

注册网址：https://mp.weixin.qq.com/wxopen/waregister?action=step1

2.获取AppID

由于后期调⽤微信⼩程序的接⼝等功能，需要索取开发者的⼩程序中的 APPID ，所以在注册成功后，可登录，然后获取APPID。

3.开发工具下载

下载之后直接安装就完事，可以选择安装目录

以下为页面布局

4.小程序目录结构

小程序框架的⽬标是通过尽可能简单、高效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服务。
小程序框架提供了自己的视图层描述语⾔ WXML ，WXSS以及JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

小程序文件结构与传统Web对比

结构	传统Web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	JavaScript	JavaScript
配置	无	JSON

基本目录结构

三、小程序配置文件

1.全局配置 app.json

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

{
  "pages":[
    "pages/demo16/demo16",
    "pages/demo15/demo15"
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#0094ff",
    "navigationBarTitleText": "我的应用",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true,
    "backgroundColor": "#33ccff"
  ,
  "tabBar": {
    "list": [{
      "pagePath": "pages/demo16/demo16",
      "text": "首页",
      "iconPath": "icon/_home.png",
      "selectedIconPath": "icon/home.png"
    },
   "sitemapLocation": "sitemap.json"
}          

2.页面配置 page

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

小程序中新增/减少页面，都需要对 pages 数组进行修改。

如开发目录为：

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

则需要在 app.json 中写

{
  "pages": ["pages/index/index", 
            "pages/logs/logs"]
}

3.window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
navigationBarTitleText	string		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
enablePullDownRefresh	boolean	false	是否开启全局的下拉刷新。
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为 px。

  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#0094ff",
    "navigationBarTitleText": "我的应用",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true,
    "backgroundColor": "#33ccff"
  }

4.Tabbar

属性列表

属性	类型	默认值	必填	说明
ext-class	string		否	添加在组件内部结构的class，可用于修改组件内部的样式
list	array		否	Tabbar的项的数组，按照规范，至少要有2个Tabbar项
current	number	0	否	当前选中的Tabbar项的下标
bindchange	eventhandler		否	Tabbar项发生改成的时候触发此事件，detail为{index, item}，index是Tabbar下标，item是对应的Tabbar项的配置

list属性是对象数组，每一项表示一个Tabbar项，其字段含义为

字段名	类型	默认值	必填	说明
text	string		是	Tabbar项的标题
iconPath	string		否	Tabbar项的icon图片路径，建议使用绝对路径，相对路径要相对于组件所在目录的。
selectedIconPath	string		否	Tabbar项选中时的icon，建议使用绝对路径，相对路径要相对于组件所在目录的。
badge	string		否	是否显示Tabbar的右上角的Badge

  "tabBar": {
    "list": [{
      "pagePath": "pages/demo16/demo16",
      "text": "首页",
      "iconPath": "icon/_home.png",
      "selectedIconPath": "icon/home.png"
    },
    {
      "pagePath": "pages/img/img",
      "text": "图片",
      "iconPath": "icon/_img.png",
      "selectedIconPath": "icon/img.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "icon/_my.png",
      "selectedIconPath": "icon/my.png"
    },
    {
      "pagePath": "pages/search/search",
      "text": "搜索",
      "iconPath": "icon/_search.png",
      "selectedIconPath": "icon/search.png"
    }] ,
    "color": "#ff9400" ,
    "backgroundColor": "#fff"
  }

四、基础语法

1.数据绑定

数据包括 字符串、数字、布尔类型、对象，列表等

1.text 相当于以前web中的span标签 行内元素 不会换行

2.view 相当于以前web中的div标签 块级元素 会换行

3.block:占位符的标签,写代码的时候 可以看到标签的存在页面渲染的时候小程序会把它移除掉

【JavaScript-数据】

 /**
   * 页面的初始数据
   */
  data: {
    msg:"hello mina",
    num:1000,
    truth:true,
    person:{
      name:"suc",
      age:18,
      habit:"AI"
    },
    isChecked:true,
    list:[
      {
        id:0,
        name:'美猴王',
        nick:"mhw"
      },
      {
        id:1,
        name:"齐天大圣",
        nick:"sss"
      },
    {
      id:2,
      name:"孙悟空",
      nick:"ssa"
    }
    
    ]
  }   

【WXML】

<!-- 1.字符串 -->
<view> {{msg}} </view>
  <!-- 2.数字类型 -->
<view>{{num}}</view>
<!-- 3.bool类型 -->
<view>love:{{truth}}</view>
<!-- 4.Object类型 -->
<view>{{person.name}}</view>
<view>{{person.age}}</view>
<view>{{person.habit}}</view>
<!-- 5.自定义属性 -->
<view data-num="{{num}}">自定义属性</view>
<!-- 6.使用bool类充当属性 -->
<view>
  <checkbox checked="{{isChecked}}">123</checkbox>
</view>
<!-- 7.简单运算 -->
<view>{{1+1}}</view>
<view>{{'1'+'1'}}</view>
<view>{{ 11%2==0 ? '偶数' : '奇数'}}</view>

2.列表

1.wx:for = “{{数组或者对象}}”wx:for-item=“循环项的名称” wx:for-index = “循环项的索引”
2.wx:key = “唯一的值” 用来提高列表的渲染性能

1. wx:key 绑定一个普通字符串的时候，那么这个字符串的名称肯定是循环数组中的对象的唯一属性

2. wx:key ="*this" 就表示你的数组是一个普通的数组 *this表示是 循环项

   3. 当出现 数组的循环嵌套的时候，尤其要注意，以下绑定的名称不要重名
      wx:for-item=“item” wx:for-index=“index”

   4. 默认情况下我们不写wx:for-item=“item” wx:for-index=“index”
      小程序也会把循环项的名称和索引的名称 item 和 index, 只有一层循环的话（wx:for-item=“item” wx:for-index=“index”）可以省略

<view>
  <view
  wx:for="{{list}}"
  wx:for-item="item"
  wx:for-index="index"
  wx:key="id"
  >
    索引：{{index}}
    --
    值：{{item.name}}
  </view>
</view>

3.对象循环

1.wx:for="{{对象}}" wx:for-item=“对象的值” wx:for-index=“对象的属性”
2.循环对象的时候最好把item和index的名称都改一下
wx:for-item=“value” wx:for-index=“key”

<view>
  <view>对象循环</view>
  <view 
  wx:for="{{person}}" 
  wx:for-item="value" 
  wx:for-index="key"
  wx:key="age">
    属性：{{key}}
    --
    值：{{value}}

  </view>
</view>


<!--  block 

-->
<view>
  <block
  wx:for="{{list}}"
  wx:for-item="item"
  wx:for-index="index"
  wx:key="id"
  class="mylist"
  >
    索引：{{index}}
    --
    值：{{item.name}}
  </block>
</view>

4.条件渲染

<!-- 11.条件渲染
  1.wx:if="{{true/false}}"
  2.wx:if
    wx:elif
    wx:else
  3.hidden
    1.标签直接加属性 hidden
    2.hidden="{{true}}"
  4.什么场景下使用：
    1.当标签不频繁切换时：优先使用 wx:if
      直接把标签从页面结构中移除
    2.当标签频繁切换的时候，优先使用hidden
      通过添加样式的方式来切换显示
      注意：hidden属性不要和样式display一起使用
-->

<view>
  <view>条件渲染</view>
  <view wx:if="{{true}}">显示</view>
  <view wx:if="{{false}}">隐藏</view>

  <view>-----------</view>
  <view hidden>hidden1</view>
  <view hidden="{{false}}">hidden2</view>

  <view>-----------</view>
  <view wx:if="{{false}}">wx:if</view>
  <view hidden>hidden</view>

</view>

5、事件绑定

小程序中的事件绑定，通过bind关键字来实现，如bindtap，bindinput，bindchang

<!-- 
1.需要给input事件标签绑定 input事件
  绑定关键字 bindinput
2.如何获取 输入框的值
  通过事件源来获取
  e.detail.value
3.把输入框的值赋值到data当中
  写法：
    this.setData({
      num:e.detail.value
    })
4.需要加入一个点击事件
    1.bindtap
    2.无法在小程序当中 事件中直接传参
    3.通过自定义属性的方式传递参数
    4.事件源中获取 自定义属性


 -->

<input type="text" bindinput="handleInput" />
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>{{num}}</view>

Page({
  data: {
    num:0
  },
handleInput(e){
	console.log(e)
    this.setData({ 
      num:e.detail.value})
  },
handletap(e){
  // 1.获取自定义属性 operation
  //console.log(e)
  const operation =e.currentTarget.dataset.operation;
  this.setData({
    num:this.data.num + operation
  })

}
})

六、常用组件

1.view

代替原来的div

2.text

属性	类型	默认值	必填	说明
selectable	boolean	false	否	文本是否可选
user-select	boolean	false	否	文本是否可选，该属性会使文本节点显示为 inline-block
space	string		否	显示连续空格
decode	boolean	false	否	是否解码

space 的合法值

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

tip: decode可以解析的有   < > & '    

3.image

属性	类型	默认值	必填	说明
src	string		否	图片资源地址
mode	string	scaleToFill	否	图片裁剪、缩放的模式
lazy-load	boolean	false	否	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

mode 的合法值

值	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

<!-- 
  image:图片加载
  1. src 指定要加载的图片路径
  图片的默认宽度和高度 320*320 原图大小是320*240 原图大小是200*100
  2.model 决定图片内容，如何和图片标签宽高做适配
    1.scaleToFill 默认值 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
    2.aspectFit 保持宽高比 确保图片长边显示出来
    3.widthFix 宽度确定，高度会自己调整
 -->
 <image class="" src="https://ftp.bmp.ovh/imgs/2020/10/f315c6f1f74cb9c5.jpg" mode="widthFix" lazy-load="false" binderror="" bindload="" />

4.swiper

微信内置轮播图组件，默认宽度100%，高度150px

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色
indicator-active-color	color	#000000	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换
current	number	0	否	当前所在滑块的 index
interval	number	5000	否	自动切换时间间隔
duration	number	500	否	滑动动画时长
circular	boolean	false	否	是否采用衔接滑动

<!-- 
   1. 轮播图的外层容器 swiper
   2.每一个轮播项 swiper-item
   3.swiper标签 存在默认样式 
    1.width 100%
    2.height 150px
    3.swiper 高度，无法实现内容撑开
  4.先找出来 原图的宽度和高度 等比例给swiper定高度和宽度
  5.autoplay 自动轮播
  6.interval 修改轮播时间 circular 衔接轮播 indicator-dots 显示指示器 indicator-color指示器未选中颜色
 -->
 <swiper autoplay interval="2000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
   <swiper-item><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB15tIjGVXXXXcoapXXSutbFXXX.jpg" /> </swiper-item>
   <swiper-item><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg"/></swiper-item>
   <swiper-item><image mode="widthFix" src="https://img.alicdn.com/imgextra/i3/27/O1CN019CAYMI1C4PK6mp9qX_!!27-0-luban.jpg" /> </swiper-item>
  </swiper>

5.navigator

导航组件，类似于超链接

属性	类型	默认值	必填	说明
target	string	self	否	在哪个目标上发生跳转，默认当前小程序可选值self/miniProgram
url	string		否	当前小程序内的跳转链接
open-type	string	navigate	否	跳转方式

open-type 有效值：

值	说明
navigate	保留当前页面，跳转到应用内的某个页面
redirect	关闭当前页面，跳转到应用内的某个页面
reLaunch	关闭所有页面，打开到应用内的某个页面
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

<!-- 
  导航组件：navigator
    1.块级元素：默认会换行 可以直接加宽度和高度
    2.url 要跳转的页面 绝对路径 相对路径
    3.target 要跳转到当前的小程序还是其他的小程序页面
      self 默认值 小程序自己的页面
      miniProgram 其他的小程序页面
    4.open-type 跳转方式
      1.navigate 默认值 保留当前页面，跳转到应用内某个页面，但不能跳到tabbar页面
      2.redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面
      3.switchTab 跳转到taBar页面，并关闭其他所有非tabBar页面
      4.reLaunch 关闭所有页面，打开应用内的某个页面
 -->
 <navigator url="/pages/demo10/demo10">轮播图页面</navigator>
 <navigator open-type="switchTab" url="/pages/index/index">跳转到 tabbar页面</navigator>
 <navigator open-type="redirect" url="/pages/demo10/demo10">轮播图页面</navigator>
 <navigator url="/pages/demo10/demo10">轮播图页面</navigator>
 <navigator open-type="reLaunch" url="/pages/index/index">reLaunch随便跳</navigator>

6.button

属性	类型	默认值	必填	说明
size	string	default	否	按钮的大小
type	string	default	否	按钮的样式类型
plain	boolean	false	否	按钮是否镂空，背景色透明
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	名称前是否带 loading 图标
form-type	string		否	用于 form组件，点击分别会触发 form 组件的 submit/reset 事件
open-type	string		否	微信开放能力

size 的合法值

值	说明
default	默认大小
mini	小尺寸

type 的合法值

值	说明
primary	绿色
default	白色
warn	红色

form-type 的合法值

值	说明
submit	提交表单
reset	重置表单

open-type 的合法值

值	说明
contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明
share	触发用户转发，使用前建议先阅读使用指引
getPhoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数具体说明
openSetting	打开授权设置页
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容

<!-- 
  button 标签
  1.外观的属性
    1.size 控制按钮的大小
      1.default 默认大小
      2.mini小尺寸
    2.type 用来控制按钮的颜色
      1.default 灰色
      2.primary 绿色
      3.warn 红色
    3.plain 按钮是否镂空，背景色透明
 -->
 <button>默认按钮</button>
 <button size="mini"> mini 默认按钮</button>
 <button loading type="primary">primary按钮</button>
 <button type="warn">warn按钮</button>
 <button type="warn" plain>plain按钮</button>

 <!-- 
  contact 	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，
  share 	触发用户转发，使用前建议先阅读使用指引 	
  getPhoneNumber 	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息， 
    1.绑定一个事件，bindgetphonenumber
    2.在事件中回调函数 通过参数获取信息
    3.获取到的信息 已经加密过
      需要用户自己到小程序后台服务器，在后台解析再返回
  getUserInfo 	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 	
  launchApp 	打开APP，可以通过app-parameter属性设定向APP传的参数具体说明 	
  openSetting 	打开授权设置页 	
  feedback 	打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容

  -->
  <button open-type="contact">contact</button>
  <button open-type="share">share</button>
  <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
  <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
  <button open-type="launchApp">launchApp</button>
  <button open-type="openSetting">openSetting</button>
  <button open-type="feedback">feedback</button>

// pages/demo13/demo13.js
Page({
  //获取手机号码
  getPhoneNumber(e){
    console.log(e);
  },
  //获取用户信息
  getUserInfo(e){
    console.log(e)
  }
})

7.icon

图标。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性	类型	默认值	必填	说明
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	number/string	23	否	icon的大小
color	string		否	icon的颜色，同css的color

 <icon class="" type="success" size="23" color=""></icon>

8.radio

属性	类型	默认值	必填	说明
value	string		否	radio 标识。当该radio 选中时，radio-group的 change 事件会携带radio的value
checked	boolean	false	否	当前是否选中
disabled	boolean	false	否	是否禁用
color	string	#09BB07	否	radio的颜色，同css的color

9.checkbox

属性	类型	默认值	必填	说明
value	string		否	checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value
disabled	boolean	false	否	是否禁用
checked	boolean	false	否	当前是否选中，可用来设置默认选中
color	string	#09BB07	否	checkbox的颜色，同css的color

<!-- 
    radio 单选框
    1.radio 标签 必须要和父元素 radio-group来使用
    2.value选中的单选框的值
    3.需要在radio-group绑定的change事件
    4.需要在页面中显示选中的值
 -->
 <checkbox-group bindchange="handleChange">
    <checkbox  value="male">男</checkbox>
    <checkbox  value="female">女</checkbox>
</checkbox-group>

<view>
    您选中的是：{{gender}}
</view>

Page({
  data: {
    gender:""
    
  },
  handleChange(e){
    //1.获取单选框中的值
    console.log(e)
    let gender =e.detail.value;
    //2.赋值
    this.setData({
      gender
    })
  }
})