微信小程序入门

一 环境准备

1.注册账号

微信小程序有别于web应用，web应用通常由我们自己管理发布，但是微信小程序由微信统一管理，因此需要注册账号。

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

2.获取AppID

AppID是微信小程序的身份标记，后期开发中需要调用开放接口，发布应用都需要用到AppID。

可登录微信公众平台 进入“开发” -- “开发设置” 获取AppID

3.下载开发工具

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

微信开发者工具集开发，预览，调试，发布于一身。

 

二 小程序目录结构

1.小程序文件结构和传统web对比

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

通过以上对比得出，传统web 是三层结构。而微信小程序 是四层结构，多了一层 配置.json

js文件用于：控制逻辑代码，相当于vue的script

wxml 控制页面结构，就相当于vue里面的tempplate

wxss 控制样式，相当于vue的style

 

三 小程序配置文件

1.全局配置app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。普通快速启动项目里边的 app.json 配置

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

字段的含义

1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。（控制页面路由，接收一个数组，数组是页面路径，如果路径不存在，会自动创建 ）

2. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。（控制页面窗口信息。 ）

3. background前缀的用于控制背景配置

4. navigationBar前缀控制导航栏

5. 完整的配置信息请参考 app.json配置 

tabbar

 

2.页面配置page.json

页面目录下的 page.json 这类和小程序页面相关的配置。

页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新。 详见 Page.onPullDownRefresh
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px。 详见 Page.onReachBottom
disableScroll	Boolean	false	设置为 true 则页面整体不能上下滚动；只在页面配置中有效，无法在 app.json 中设置该项

特点：当page配置的属性和全局app.json相同的时候，会使用局部配置覆盖全局配置

 

全局样式与局部样式

app.wxss 全局样式

每个文件下page.wxss 局部样式

全局样式可以给所有页面使用，局部样式优先级高于全局样式，如果出现相同属性，局部样式覆盖全局样式

 

3.sitemap配置了解即可

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引。

 

四 模板语法

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

1.数据绑定

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

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

2.列表渲染（循环语法）

<view wx:for="{{array}}"> {{item}} </view>

Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

wx:for="{{数组}}" 默认数据内容 item，默认索引index

改变内容变量 wx:for-item='变量名' 改变索引变量名 wx:for-index="变量名"

wx:key="字符串" wx:key="*this"

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

block是一个空标签，可以用来写循环标签，或者判断标签都可以，他不会出现在页面上

<!-- block标签，这是一个空标签，页面不会显示 -->
<!-- wx:key接受的是一个字符串 -->
<!-- wx:key 传入*this表示循环item的本身 -->
<view>
  <block wx:for="{{hobby}}" wx:key="*this">
    {{item}}
  </block>
</view>

3.循环对象

<view wx:for="{{对象}}" wx:key="index">
	表示对象的属性值：{{item}}
    表示对象的key值：{{index}}
</view>

4.判断语法

<view wx:if="{{条件一}}"></view>
<view wx:elif="{{条件二}}"></view>
<view wx:else>其他条件</view>

hidden

<!-- wx:if和hidden -->
<!-- hidden的条件为真的时候，隐藏，否则显示 -->
<view hidden="{{ gender === '女' }}">隐藏的模块</view>

5.组件属性

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
  }
})

6.布尔类型

不要直接写 checked="false"，其计算结果是一个字符串

<checkbox checked="{{false}}"> </checkbox>

7.运算

7.1三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

7.2算术运算

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

7.3 逻辑判断

<view wx:if="{{length > 5}}"> </view>

7.4 字符串运算

<view>{{"hello" + name}}</view>

Page({
  data:{
    name: 'MINA'
  }
})

7.5 注意

花括号和引号之间如果有空格，将最终被解析成为字符串

 

五 小程序事件绑定

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

不同的组件支持不同的事件，具体看组件的说明即可。

1.通过输入事件获取输入内容

<!-- 监听输入框事件 -->
<input bindinput="userInput" type="text" style="border: 2px solid #ccc; margin: 10px 10px"/>

userInput(e) {
    // 用户输入的内容
    console.log(e.detail.value)
},

2.简易的双向绑定

<!-- 利用双向绑定实现数据获取 -->
<view>
  用户名：<input type="text" style="border: 2px solid #ccc; margin: 10px 10px" model:value="{{userName}}"/>
  <button bindtap="getUserName">获取用户名</button>
</view>

getUserName() {
    // 读取data下的数据
    console.log(this.data.userName)
},

3. 特别注意

1. 绑定事件时不能带参数 不能带括号 以下为错误写法

   <input bindinput="handleInput(100)" />

    

2. 事件传值 通过标签自定义属性的方式 和 value

   <input bindinput="handleInput" data-item="100" />

    

3. 事件触发时获取数据

    handleInput: function(e) {
       // {item:100}
      console.log(e.currentTarget.dataset)
         
       // 输入框的值
      console.log(e.detail.value);
     }
   

    

六 页面图层 wxss

兼容css大多数特征，而且在css的基础上进行扩展

1、响应式单位 rpx 响应式布局单位

屏幕的宽度就是750rpx

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

设备	RPX换算PX (屏幕宽度/750)	PX换算RPX (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

使用步骤：

1. 确定设计稿宽度 pageWidth

2. 计算比例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth。

3. 在less文件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。

 

2、样式导入

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

示例代码：

/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

3.选择器

特别需要注意的是 小程序 不支持通配符 * 因此以下代码无效！

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
nth-child(n)	view:nth-child(n)	选择某个索引的标签
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

 

七 常见组件

1. view

代替 原来的 div 标签

  <view hover-class="h-class">
  点击我试试
  </view>

2. text

1. 文本标签

2. 只能嵌套text

3. 长按文字可以复制（只有该标签有这个功能）

4. 可以对空格 回车 进行编码

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
decode	Boolean	false	是否解码

2.1. 代码

  <text selectable="{{false}}" decode="{{false}}">
    普&nbsp;通
  </text>

3. image

1. 图片标签，image组件默认宽度320px、高度240px

2. 支持懒加载

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	'scaleToFill'	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载

mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域

4. swiper

默认宽度 100% 高度 150px

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换时间间隔
circular	Boolean	false	s是否循环轮播

swiper-item

滑块

默认宽度和高度都是100%

 <swiper indicator-dots="{{true}}"
        autoplay="{{true}}" interval="2000" duration="{{500}}">
        <block>
          <swiper-item>
            <view>1</view>
          </swiper-item>
          <swiper-item>
            <view>2</view>
          </swiper-item>
          <swiper-item>
            <view>3</view>
          </swiper-item>
        </block>
      </swiper>

 

5.navigator

导航组件 类似超链接标签

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

open-type 有效值：

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
exit	退出小程序，target="miniProgram"时生效