初识小程序

前言

小程序本着“一触即用，用完即走”的理念，让用户不用考虑内存的限制，在市场上有诸多优势，未来市场对于小程序的需求将是巨大的，所以就让我和大家一起来了解一下如何该如何搭建一个小程序

---

1. 小程序环境搭建

1.1 安装微信开发者工具

微信开发者工具下载地址

1.2 小程序项目的主要目录文件作用

• project.config.json 项目配置文件，做一些个性化配置，例如界面颜色、编译配置等等
• app.json 当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
• sitemap 配置小程序及其页面是否允许被微信索引
• pages 里面包含一个个具体的页面
• wxss 页面样式，app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
• app.js 小程序的逻辑
• js 页面逻辑
• json 页面配置
• wxml 页面结构
  注意： 微信小程序官方的限制大小是2MB

2. 基础布局容器

组件官方地址

2.1 view 块级元素 (相当于html中的div)

属性	类型	默认值	说明
hover-class	string	none	指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
hover-stop-propagation	boolean	false	指定是否阻止本节点的祖先节点出现点击态(相当于JS的阻止冒泡)
hover-start-time	number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	number	400	手指松开后点击时状态保留的时间，单位毫秒

因为移动端没有鼠标，所以这里的 hover 是手指按下，并不是鼠标悬停
hover-class 有类似于 js 的冒泡机制，即便子元素
hover-class是默认设置，按住子元素后也会冒泡触发父元素的hover-class事件，大多数时候不想让子元素冒泡触发父元素的hover-class事件，这时候就需要将子元素hover-stop-propagation 属性的值改为 true，来阻止冒泡

2.2 text 行内元素 (相当于html中的span)

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

space 的合法值

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

decode 是否解码，就是解压一些html代码等
可以先看一下面这张图里面的   直接显示的就是  

可是如果我们想   显示成空格，那我们就需要使用 decode 属性进行解码，它就可以显示空格了

2.3 image（相当于html中的img)

属性	类型	默认值	说明
src	string		图片资源地址
mode	string	scaleToFill	图片裁剪、缩放的模式
show-menu-by-longpress	boolean	false	开启长按图片显示识别小程序码菜单 (版本2.7.0)

其他属性可参考官方文档

mode 的合法值

值	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 (版本 2.10.3)

裁剪模式，不缩放图片，显示裁剪下的那部分区域
值为，top、bottom、center、left、right ，top left、top right、bottom left、bottom right ，详请可参考官方文档

<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" mode="top"></image>
<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" mode="aspectFit"></image>
<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" mode="aspectFill"></image>
<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" mode="widthFix"></image>
<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" mode="heightFix"></image>

2.4 navigator 超链接

<navigator url="/pages/logs/logs"  hover-class="none">跳转到日志</navigator>

• \ 代表的是根路径
• url 是要跳转的地址(就是 a 标签的 href) 小程序内的链接跳转，无法访问外网
• hover-class=“none” 取消 navigator 的点击效果

open-type 属性 跳转方式

1. 默认是 navigate 但 navigate的跳转方式是可以返回的，有些时候我们是不需要返回的

2. redirect 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabBar 页面（如下图所示）
   

3. switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，路径后不能带参数

4. reLaunch 关闭所有页面，打开到应用内的某个页面（万能方法，可以建新窗口，也可以传递参数）。

2.5 scroll-view

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性	类型	默认值	说明
scroll-x	boolean	false	允许横向滚动
scroll-y	boolean	false	允许纵向滚动

<scroll-view scroll-x>
  <view class="scrFather">
  	 <view class="scrSon"></view>
  	 <view class="scrSon"></view>
  	 <view class="scrSon"></view>
  	 <view class="scrSon"></view>
  	 <view class="scrSon"></view>
  </view>
</scroll-view>

.scrFather {
  display: flex;
}
.scrSon {
  width: 100px;
  height: 100px;
  background-color: gold;
  margin: 2px;
  flex: 0 0 100px; 
}

2.6 swiper

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。
swiper-item 仅可放置在swiper组件中，宽高自动设置为100%。

• indicator-dots 是否显示面板指示点
• indicator-color 指示点颜色
• indicator-active-color 当前选中的指示点颜色

<swiper indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff">

• autoplay 是否自动切换
• interval 自动切换时间间隔(默认5000毫秒)
• circular 是否采用衔接滑动
• previous-margin 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
• next-margin 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值

rpx(相当于css中的rem)： rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素)。

<swiper previous-margin="20px" next-margin="20rpx" indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" autoplay interval="5000" circular>

2.7 表单组件

1. button

   1. size 按钮的大小

      • default 默认大小
      • mini 小尺寸

   2. type 按钮的样式类型

      • primary 绿色
      • default 白色
      • warn 红色

   3. plain 按钮是否镂空，背景色透明

   4. disabled 是否禁用

   5. loading 名称前是否带 loading 图标

   6. open-type 微信开放能力

      

• input

1. value 输入框的初始内容
2. type input的类型

text 文本输入键盘
number 数字输入键盘
idcard 身份证输入键盘
digit 带小数点的数字键盘

3. confirm-type 设置键盘右下角按钮的文字，仅在type='text’时生效
   • send 右下角按钮为“发送”
   • search 右下角按钮为“搜索”
   • next 右下角按钮为“下一个”
   • go 右下角按钮为“前往”
   • done 右下角按钮为“完成”
4. confirm-hold 点击键盘右下角按钮时是否保持键盘不收起
5. password 是否是密码类型
6. placeholder 输入框为空时占位符
7. placeholder-style 指定 placeholder 的样式
8. placeholder-class 指定 placeholder 的样式类
9. disabled 是否禁用
10. maxlength 最大输入长度，设置为 -1 的时候不限制最大长度(默认长度 140)
11. cursor-spacing 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
12. focus 获取焦点
13. cursor 指定focus时的光标位置
    注意：input 初始样式是没有边框的，这里的大多数属性要用手机进行预览

2.8 其他组件

• icon 字体图标

  1. type icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
  2. size icon的大小
  3. color icon的颜色，同css的color
     

  <icon type="success"></icon>
  <icon type="success_no_circle"></icon>
  <icon type="info"></icon>
  <icon type="warn"></icon>
  <icon type="waiting"></icon>
  <icon type="cancel"></icon>
  <icon type="download"></icon>
  <icon type="search"></icon>
  <icon type="clear"></icon>
  

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

  1. percent 百分比0~100
  2. show-info 在进度条右侧显示百分比
  3. border-radius 圆角大小
  4. font-size 右侧百分比字体大小
  5. stroke-width 进度条线的宽度
  6. activeColor 已选择的进度条的颜色
  7. backgroundColor 未选择的进度条的颜色
     

 <progress percent="60" show-info 
  stroke-width="20px" border-radius="20px" activeColor="pink" backgroundColor="rgba(0, 0, 0, 0.5)"></progress>

3. 框架

3.1 全局配置

1. entryPagePath 指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数。

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

   未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。

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

3. window

   • navigationBarBackgroundColor 导航栏背景颜色，如 #000000（颜色值要是16进制）
   • navigationBarTextStyle 导航栏标题颜色，仅支持 black / white
   • navigationBarTitleText 导航栏标题文字内容
   • enablePullDownRefresh 是否开启全局的下拉刷新（true不用加双引号）。
   • backgroundTextStyle 下拉 loading 的样式，仅支持 dark / light
   • backgroundColor 窗口的背景色
     注意：需要下拉才能看到
     

4. tabBar 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

   • list tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
     list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：
     1. pagePath 页面路径，必须在 pages 中先定义
     2. text tab 上按钮文字
     3. iconPath 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
     4. selectedIconPath 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
        

• position tabBar 的位置，仅支持 bottom / top
• selectedColor tab 上的文字选中时的颜色，仅支持十六进制颜色
• backgroundColor tab 的背景色，仅支持十六进制颜色
• borderStyle tabbar 上边框的颜色， 仅支持 black / white

3.2 页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。

• navigationBarTitleText 导航栏标题文字内容
• navigationBarBackgroundColor 导航栏背景颜色，如 #000000
• enablePullDownRefresh 是否开启当前页面下拉刷新。
• backgroundColor 窗口的背景色
  使
  详见官方文档

3.3 WXML语法参考

1. 数据绑定（和 Vue的语法差不多）
   内容

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

还支持三元运算，算数运算，逻辑判断等。
详见数据绑定

2. 条件渲染

• wx:if
• wx:elif
• wx:else

<block wx:if="{{count == 0}}">
  <view>if</view>
</block>
<block wx:elif="{{count == 1}}">
 <view>elif</view>
</block>
<block wx:else>
  <view>else</view>
</block>

block标签相当于一个包裹的容器，如下图所示，block标签并不会被渲染到页面上

3. 列表渲染

• wx:for
  在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<block wx:for="{{['第一项', '第二项', '第三项']}}">
  <view>
    当前项的索引：{{index}}
  </view>
  <view>
    当前项的值：{{item}}
  </view>
</block>

自定义变量默认名
使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名：

<block wx:for="{{['第一项', '第二项', '第三项']}}" wx:for-index="i" wx:for-item="content">
  <view>
    当前项的索引：{{i}}
  </view>
  <view>
    当前项的值：{{content}}
  </view>
</block>

• wx:key 指定列表中项目的唯一的标识符吗，如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
   注意：item 是对象时不能使用 *this作为:key的值

3.4 Page(Object object)、生命周期

注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }

详见官方文档

3.5 事件

• touchstart 手指触摸动作开始
• touchmove 手指触摸后移动
• touchcancel 手指触摸动作被打断，如来电提醒，弹窗
• touchend 手指触摸动作结束
• tap 手指触摸后马上离开（可以当做click点
  击事件）

<!-- data-后写要传递参数的属性名 -->
<view bindtap="showTap" data-title="测试Tap"></view>

  showTap: function (res) {
    console.log(res)
  },

tap 事件会携带一个参数，而我们要传递的参数就在 res.currentTarget.dataset 里

如果想要通过事件修改数据不能采用=直接赋值的方式这种方式只会更改逻辑层的数据但是不会更改视图区内数据的

而需要采用setData方法，setData的参数是一个对象

this.setData( {
      name: res.currentTarget.dataset.name
    })

setData方法也可以用来添加数据

3.6 自定义组件

如果页面中那个模块被多次用到就选择可以用自定义组件来存放，比如页面头部模块，和页面底部模块等

1. 创建自定义组件

1. 最好现在根目录先创建一个组件库文件夹存放所有的组件
2. 在组件库文件夹下再新建一个文件夹用来存放单个组件
3. 在单个组件文件夹下右键 点击 新建 Component，新建组件
4. 在 page 文件的 json 文件中引入自定义组件，属性名就是组件名，值就是组件的路径

   "usingComponents": {
   "custom": "/components/custom/custom"
   }
   

5. 在页面中使用组件

   // 单标签双标签都可以
   // <custom></custom>
   <custom/>
   

注意： 组件首字母最好大写，组件名后最好加 + View 防止命名冲突

2. 自定义组件传递属性

1. 先给组件添加一个自定义属性

    <PubTitleView myTitle="自定义标题"/>
   

2. 在组件的 js 文件下的 properties 下定义传递的自定义属性

   		/**
   			* 组件的属性列表
   		   	*/
   		  properties: {
   		  	// myTitle 自定义属性名
   		    myTitle: {
   		      // 类型
   		      type: String,
   		      // 默认值
   		      value: ""
   		    }
   		  }
   

3. 组件的.wxml文件中渲染传递过来的属性值

     <view>{{myTitle}}</view>
   

4. API

4.1 基础API

1. 系统信息

1. wx.getSystemInfo(Object object)
   获取系统信息(异步)
2. wx.getSystemInfoSync() 获取系统信息(同步)
   • model 设备型号
     详见官方文档

2. 交互

1. wx.showLoading(Object object)
   显示 loading 提示框，不会自动关闭。需主动调用 wx.hideLoading 才能关闭提示框

 wx.showLoading({
      title: "加载中...",
    });
    setTimeout(function() {
      wx.hideLoading()
    }, 3000);

2. wx.showToast(Object object)
   显示消息提示框

• title 提示消息
• icon 图标（默认 success）
• image 自定义图标的本地路径，image 的优先级高于 icon
• duration 提示的延迟时间

3. 路由

1. wx.switchTab(Object object)
   跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面（后面不能携带参数）

wx.switchTab({
      url: '/pages/index/index?id=123',
    })

2. wx.reLaunch(Object object)可以跳转到tabBar页面，关闭所有页面，打开到应用内的某个页面

3. wx.redirectTo(Object object)
   关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

4. wx.navigateTo(Object object)
   保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层

5. wx.navigateBack(Object object)
   关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层
   注意：如果使用wx.navigateTo跳转tabBar页面，使用wx.navigateBack返回tabBar页面页面报错
   

4. 网络

1. wx.request(Object object)
   发起 HTTPS 网络请求。使用前请注意阅读相关说明。

• url 开发者服务器接口地址
• data 请求的参数
• success 接口调用成功的回调函数
• fail 接口调用失败的回调函数

wx.request({
      url: '请求地址',
      data: {
       参数名:  参数值
      },
      success: res => {
        console.log(res);
      },
      fail: err => {
        console.log(err);
      }
    })

5. ES6 模块化

1. ES6模块化的基本语法

1.1 默认导出与默认导入

• 默认导出语法 export default 默认导出的成员

export default {
    a,
    b,
    show
}

• 默认导入的语法 import 接收名称 from ‘模块标识符’

import m1 from './m1.js'

注意：每个模块中，只允许使用唯一的一次 export default, 否则会报错
如果没有导出会接收一个空对象

1.2 按需导出 与 按需导入

• 按需导出语法 export let s1 = 0
• 按需导入语法 import { s1 } from ‘模块标识符’

// 默认导出和按需导出可以同时存在
import m1, { s1, s2 as ss2, say } from './m1.js'

注意：每个模块中，可以使用多次按需导出

1.3 直接导入并执行模块代码

• import ‘模块标识符’

import './m2.js'; 

2. 小程序模块化的基本语法

1. require(string path)
   引入模块。返回模块通过 module.exports 或 exports 暴露的接口。
2. module.exports
   导出模块
3. exports
   module.exports 的引用

function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

小程序模块化官方文档

6. 项目上线

1. 先在微信公众平台注册小程序
2. 在 开发 模块下复制AppID 替换掉小程序的测试ID
3. 点击 开发者工具 右上角的上传 即可上传代码
4. 在 登录小程序页面 可填写图标、客服等信息
5. 在 版本 -> 版本管理 提交审核 上传的代码
6. 待审核通过后在 版本 -> 版本管理 中点击 上线

总结

本文简单介绍了如何搭建微信小程序，小程序里常用模块用法，以及小程序的上线准备，欢迎大家多多指导交流，希望大家有什么好的动图制作软件可以推荐一下，谢谢。