初学微信小程序

首先登陆微信公众平台：https://mp.weixin.qq.com/

注册一个账号，注册成功后可以获取到一个appId，这个appId就是开发者的唯一标识；

微信开发者工具下载：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html       （不用特意去记，在微信公众平台翻翻就能找到）

 小程序文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

普通web和微信小程序的区别

 新建项目

我们可以打开微信开发者工具，点击项目选项，新建一个项目，然后设置项目名称，指定项目文件地址，输入appId，即可新建一个小程序项目；

小程序目录结构：

新建成功后会有这样的一个目录结构：

 pages里面是放页面的，里面会有两个预制的页面

 index是首页，logs是显示日志的页面

我们可以看到每个页面都有4个部分构成，.js，.json，.wxml，.wxss，分别代表js文件、页面配置文件、'html'页面、'css'页面;

utils文件中放着一些公共的方法

app.js是整个小程序的入口文件

app.json是控制整个小程序大体接口的文件，比如页面数量配置，导航条默认标题，导航条背景明暗设置，导航条字体颜色设置；

app.wxss是默认全局的样式

project.config.json是项目配置文件，对应到开发者工具中详情按钮的内容，我们可以在开发者工具里用图形化的形式进行操作；可以配置项目名称、appid等信息；

 小程序配置介绍：

一个小程序应用会包括最基本的两种配置文件，一种是全局的app.json和页面自己的page.json

全局配置app.json：

app.json是当前小程序的全局配置，包括了小程序的所有页面路径、页面表现、网络超时时间、底部tab等；

小程序中如何新增页面呢？我们第一种想法可能是，按照结构目录一个一个新建页面，但是这种方式在小程序中显得繁琐，我们可以在app.json中的pages想汇总新增一个页面路径，小程序自动会为我们建立页面里对应的文件的！！

 如上，新增页面路径后，ctrl+s保存一下，小程序就会自动建立对应的页面了；

另外有一个需要注意，pages中哪个路径在最前面，小程序启动的时候，默认页面就是谁！！！

小程序文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

如何添加底部/顶部tab栏？

同样在app.json中配置：（yabBar要求至少两个，最多5个，否则会报错），其它配置看文档

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",//对应的页面路径
      "text": "首页",//tab名称
      "iconPath": "images/tabbar/home.png",//默认图标
      "selectedIconPath": "images/tabbar/activeHome.png",//被选择是的图标
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "images/tabbar/log.png",
      "selectedIconPath": "images/tabbar/activeLog.png"
    }]
  }

小程序汇总页面配置：

进入某一个页面的xxxx.json(具体参考文档)

{
  "usingComponents": {},
  "navigationBarBackgroundColor":"#00b26a",//配置导航栏背景色
  "navigationBarTitleText":"页面2",//配置导航栏文字内容
}

 视图层wxml

<text>:类似于web中的span标签，是行内元素

<view>:类似于web中的div标签，是块级元素

<block>:用于包括含有多个节点的代码片段，相当于一个容器，也是块级元素

数据绑定（类似vue中的双向绑定）：

在某个页面的xxx.js中定义几个变量：

data: {
    msg:"hello world 1",
    person:{
      name:"小明",
      height:185
    },
    title:"这是一个标题"
  },

在xxx.wxml中绑定这些变量：（可以绑定普通值，也可以绑定属性，需要注意的是，绑定布尔值时要加上双括号，否则会报错或不生效）

<view>
  {{ msg }}
  <view>
  {{person.name}}--{{person.height}}
  </view>
  <view data-id="{{title}}">title</view>
  <view>
    <checkbox checked="{{false}}"></checkbox>
  </view>
</view>

 列表渲染：

wx:for        (既可以循环数组也可以循环对象)

项的变量名默认为item，wx:for-item可以指定数组当前元素的变量名

下标变量名默认为index，wx:for-index可以指定数组当前下标的变量名

xxx.js:

data: {
    arr:["苹果","香蕉","西瓜"],
    person:{
      name:"小明",
      height:180
    }
  },

xxx.wxml:

<view>
  <view wx:for="{{arr}}" wx:key="{{index}}">
    {{index}}:{{item}}
  </view>

  <view wx:for="{{arr}}" wx:for-item="aa" wx:for-index="bb" wx:key="{{aa}}">
    {{bb}}:{{aa}}
  </view>

  <view wx:for="{{[1,2,3,4,5]}}" wx:key="*this">
    {{item}}
  </view>

  <view wx:for="{{person}}" wx:for-item="val" wx:for-index="key" wx:key="*this">
    {{key}}:{{val}}
  </view>
</view>

 wxss：

wxss相当于web中的css，只不过新增了尺寸单位rpx，和样式导入

rpx可以根据屏幕的宽度进行自适应，规定屏幕宽度为750rpx，如在iphone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素；可以理解为1rpx是屏幕宽度的1/750;

xxx.wxss:

.box1{
  width:50rpx;
  height:50rpx;
  background-color: aqua;
}

样式导入：

@import语句可以导入外联样式表， @import后跟需要导入的外联样式表的相对路径，用；表示语句结束。

例子：

我们在根目录下建立一个stylues文件夹，里面建立一个box.wxss文件

box.wxss：

.lg_box{
  width:200rpx;
  height:200rpx;
  background-color: aqua;
}

之后在某个页面的xxx.wxss中引入这个样式表：

@import "../../stylues/box.wxss";

样式表中的注释是/**/这样的

基础组件：

<view>组件：类似于web中的div标签，不过在小程序汇总它有个hover-class等属性，当标签被点击时会触发这个样式；

<view hover-class='lg_box'>dasd</view>

<text>组件：类似于span标签，不过在小程序汇总也添加了其它属性，比如selectable，指定文本是否可选，默认值为false

decode属性用来指定是否解码text标签中的内容，如果为false，在标签中的&emsp;这些空格会鸳鸯展示出来

<text selectable='{{true}}' decode>dsadaa&emsp;sdassa</text>

 <image>组件：

文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

小程序中的image标签和web中的img标签存在很大区别：

image组件默认宽度300px、高度240px，

小程序中不存在背景图片的说法，image标签是背景图片和img标签的结合体

src属性还是指的图片路径，

mode属性表示图片裁剪缩放的方式：

默认值是scaleToFill：缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

mode 的合法值

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

 lazy-load：图片是否懒加载 默认值是false

show-menu-by-longpress：开启长按图片显示识别小程序码菜单  默认值false

binderror：加载发生错误时触发，值是事件

bindload：加载完成时触发，值是事件

<view>
  <image src='../../images/bigImg.png' mode='widthFix'></image>
</view>

<swiper>:轮播组件

<swiper>滑块视图容器，默认宽度100%，高度150px。其中只可放置swiper-item组件，否则会导致未定义的行为。<swiper-item>默认宽度高度都是100%；

swiper的属性：

属性	类型	默认值	必填	说明	最低版本
indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色	1.1.0
indicator-active-color	color	#000000	否	当前选中的指示点颜色	1.1.0
autoplay	boolean	false	否	是否自动切换	1.0.0
current	number	0	否	当前所在滑块的 index	1.0.0
interval	number	5000	否	自动切换时间间隔	1.0.0
duration	number	500	否	滑动动画时长	1.0.0
circular	boolean	false	否	是否采用衔接滑动	1.0.0
vertical	boolean	false	否	滑动方向是否为纵向	1.0.0
previous-margin	string	"0px"	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	1.9.0
next-margin	string	"0px"	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	1.9.0
display-multiple-items	number	1	否	同时显示的滑块数量	1.9.0
skip-hidden-item-layout	boolean	false	否	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	1.9.0
easing-function	string	"default"	否	指定 swiper 切换缓动动画类型	2.6.5
bindchange	eventhandle		否	current 改变时会触发 change 事件，event.detail = {current, source}	1.0.0
bindtransition	eventhandle		否	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}	2.4.3
bindanimationfinish	eventhandle		否	动画结束时会触发 animationfinish 事件，event.detail 同上	1.9.0

easing-function 的合法值

值	说明	最低版本
default	默认缓动函数
linear	线性动画
easeInCubic	缓入动画
easeOutCubic	缓出动画
easeInOutCubic	缓入缓出动画

 示例

<swiper autoplay indicator-dots indicator-color='rgba(0,0,0,.3)' indicator-active-color='rgba(0,100,100,1)' current='0' interval='5000'
duration='500' circular vertical previous-margin='20px' next-margin='20px' display-multiple-items='1' skip-hidden-item-layout>
  <swiper-item>
    <image src='../../images/bigImg.png' mode='aspectFit'></image>
  </swiper-item>
  <swiper-item>
    <image src='../../images/bigImg.png' mode='aspectFit'></image>
  </swiper-item>
  <swiper-item>
    <image src='../../images/bigImg.png' mode='aspectFit'></image>
  </swiper-item>
</swiper>

 <navigator>：导航组件，类似于web中的a标签

属性	类型	默认值	必填	说明	最低版本
target	string	self	否	在哪个目标上发生跳转，默认当前小程序	2.0.7
url	string		否	当前小程序内的跳转链接	1.0.0
open-type	string	navigate	否	跳转方式	1.0.0
delta	number	1	否	当 open-type 为 'navigateBack' 时有效，表示回退的层数	1.0.0
app-id	string		否	当target="miniProgram"时有效，要打开的小程序 appId	2.0.7
path	string		否	当target="miniProgram"时有效，打开的页面路径，如果为空则打开首页	2.0.7
extra-data	object		否	当target="miniProgram"时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。详情	2.0.7
version	string	release	否	当target="miniProgram"时有效，要打开的小程序版本	2.0.7
hover-class	string	navigator-hover	否	指定点击时的样式类，当hover-class="none"时，没有点击态效果	1.0.0
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态	1.5.0
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒	1.0.0
hover-stay-time	number	600	否	手指松开后点击态保留时间，单位毫秒	1.0.0
bindsuccess	string		否	当target="miniProgram"时有效，跳转小程序成功	2.0.7
bindfail	string		否	当target="miniProgram"时有效，跳转小程序失败	2.0.7
bindcomplete	string		否	当target="miniProgram"时有效，跳转小程序完成	2.0.7

target属性：默认值是self，跳转到当前小程序的页面，miniProgram：跳转到其它小程序

url：指定跳转到当前小程序的链接地址

open-type：跳转方式

open-type 的合法值

值	说明	最低版本
navigate	对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能，但不能跳到tabBar页面
redirect	对应 wx.redirectTo 的功能，但不能重定向到tabbar页面
switchTab	对应 wx.switchTab 的功能，跳转到tabbar页面，并且关闭所有非tabbar页面
reLaunch	对应 wx.reLaunch 的功能，关闭所有页面，跳转到指定的所有类型页面，包括tabbar页面	1.1.0
navigateBack	对应 wx.navigateBack 的功能	1.1.0
exit	退出小程序，target="miniProgram"时生效	2.1.0

示例：

<!-- navigate -->
<navigator url='../index2/index2' open-type='navigate'>跳转到页面2</navigator>
<!-- redirect  无历史记录-->
<navigator url='../index2/index2' open-type='redirect'>重定向到页面2</navigator>
<!-- switchTab -->
<navigator url='../index/index' open-type='switchTab'>跳转到tabbar页面，并且关闭非tabbar页面</navigator>
<!-- reLaunch -->
<navigator url='../index/index' open-type='reLaunch'>关闭所有页面，可以跳转到包括tabbar内的所有页面</navigator>

 <vedio>:视频组件(更多用法查看文档)

属性	类型	默认值	必填	说明	最低版本
src	string		是	要播放视频的资源地址，支持云文件ID（2.3.0）	1.0.0
duration	number		否	指定视频时长	1.1.0
controls	boolean	true	否	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）	1.0.0
danmu-list	Array.<object>		否	弹幕列表	1.0.0
danmu-btn	boolean	false	否	是否显示弹幕按钮，只在初始化时有效，不能动态变更	1.0.0
enable-danmu	boolean	false	否	是否展示弹幕，只在初始化时有效，不能动态变更	1.0.0
autoplay	boolean	false	否	是否自动播放	1.0.0
loop	boolean	false	否	是否循环播放	1.4.0
muted	boolean	false	否	是否静音播放	1.4.0
initial-time	number	0	否	指定视频初始播放位置	1.6.0
page-gesture	boolean	false	否	在非全屏模式下，是否开启亮度与音量调节手势（废弃，见 vslide-gesture）	1.6.0
direction	number		否	设置全屏时视频的方向，不指定则根据宽高比自动判断	1.7.0
show-progress	boolean	true	否	若不设置，宽度大于240时才会显示	1.9.0
show-fullscreen-btn	boolean	true	否	是否显示全屏按钮	1.9.0
show-play-btn	boolean	true	否	是否显示视频底部控制栏的播放按钮	1.9.0
show-center-play-btn	boolean	true	否	是否显示视频中间的播放按钮	1.9.0
enable-progress-gesture	boolean	true	否	是否开启控制进度的手势	1.9.0
object-fit	string	contain	否	当视频大小与 video 容器大小不一致时，视频的表现形式	1.0.0
poster	string		否	视频封面的图片网络资源地址或云文件ID（2.3.0）。若 controls 属性值为 false 则设置 poster 无效	1.0.0
show-mute-btn	boolean	false	否	是否显示静音按钮	2.4.0
title	string		否	视频的标题，全屏时在顶部展示	2.4.0
play-btn-position	string	bottom	否	播放按钮的位置	2.4.0
enable-play-gesture	boolean	false	否	是否开启播放手势，即双击切换播放/暂停	2.4.0
auto-pause-if-navigate	boolean	true	否	当跳转到其它小程序页面时，是否自动暂停本页面的视频	2.5.0
auto-pause-if-open-native	boolean	true	否	当跳转到其它微信原生页面时，是否自动暂停本页面的视频	2.5.0
vslide-gesture	boolean	false	否	在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture）	2.6.2
vslide-gesture-in-fullscreen	boolean	true	否	在全屏模式下，是否开启亮度与音量调节手势	2.6.2
ad-unit-id	string		是	视频前贴广告单元ID，更多详情可参考开放能力视频前贴广告	2.8.1
bindplay	eventhandle		否	当开始/继续播放时触发play事件	1.0.0
bindpause	eventhandle		否	当暂停播放时触发 pause 事件	1.0.0
bindended	eventhandle		否	当播放到末尾时触发 ended 事件	1.0.0
bindtimeupdate	eventhandle		否	播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次	1.0.0
bindfullscreenchange	eventhandle		否	视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction 有效值为 vertical 或 horizontal	1.4.0
bindwaiting	eventhandle		否	视频出现缓冲时触发	1.7.0
binderror	eventhandle		否	视频播放出错时触发	1.7.0
bindprogress	eventhandle		否	加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比	2.4.0

示例：

<view>
  <video style='100%;' src='http://47.90.213.237/youtube/JU3AL8S3zyE.mp4' controls duration='60' autoplay></video>
</view>

 自定义组件：相当于vue中的组件

新建自定义组件：在跟文件下建立一个components文件夹，里面建一个MyHeader文件夹，然后再右键这个文件新建component，开发者工具会帮我们新建4个文件，很方便

 xxx.json文件中有一句："component": true,，是声明这是一个组件

xxx.wxml中写点内容：slot是插槽，可以将父组件里的内容插进去

<view class='myheader'>
  {{cData}}
  <view>
    <slot></slot>
  </view>
</view>

xxx.wxss中可以写点简单的样式：

.myheader{
  font-size: 50px;
  background-color: yellow;
}

xxx.js中可以定义组件自身的属性（cData）

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    cData:{
      value:"组件的默认值",
      type:String
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

以上是简单的定义了一个组件，那么如何在页面内引用呢？

在要引用此组件的页面的json文件汇总这样设置：

{
  "usingComponents": {
    "MyHeader":"../../components/MyHeader/MyHeader"
  },
  "navigationBarBackgroundColor": "#00b26a",
  "navigationBarTitleText": "页面3"

}

在这个页面中记得使用MyHeader组件

<view>
  <MyHeader cData="我是父组件传给子组件的值">我是自定义组件的插槽内容</MyHeader>
</view>