[移动开发]微信小程序笔记

目录结构

全局配置文件 app.json

配置项

pages

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

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

小程序中新增/减少页面，都需要对 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"]
}

window

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

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

tabBar

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

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "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"
      },
      {
        "pagePath": "pages/demo18/demo18",
        "text": "demo18",
        "iconPath": "icon/_search.png",
        "selectedIconPath": "icon/search.png"
      }
    ],
    "color":"#0094ff",
    "selectedColor":"#ff9400",
    "backgroundColor":"#ff5533",
    "position":"bottom"
  },

页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象，有以下属性：

配置项

sitemap 配置

?程序根?录下的 sitemap.json

?件?于配置?程序及其??是否允许被微信索引。

模板语法

text和view

view类似div

text

1. ?本标签

2. 只能嵌套text

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

4. 可以对空格回?进?编码

数据绑定

在标签的属性中使用{{record}}

<!-- 1 字符串 -->
<view> {{msg}} </view>
<!-- 2 数字类型 -->
<view>{{num}}</view>
<!-- 3 bool类型  -->
<view> 是否是伪娘: {{isGirl}} </view>
<!-- 4 object类型 -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>

<!-- 5 在标签的属性中使用 -->
<view data-num="{{num}}"> 自定义属性</view>

<!-- 
  6 使用bool类型充当属性 checked  
    1 字符串和 花括号之间一定不要存在空格 否则会导致识别失败 
      以下写法就是错误的示范
         <checkbox checked="       {{isChecked}}"> </checkbox>

 -->
<view>
  <checkbox checked="{{isChecked}}"> </checkbox>
</view>

Page Object

Page({
  data: {
    msg: "hello ",
    num:10000,
    isGirl:true,
    person:{
      age:13
    },
    isChecked:true
  }
});

循环

列表循环

1 wx:for="{{数组或者对象}}" wx:for-item=“循环项的名称” wx:for-index=“循环项的索引”

2 wx:key=“唯一的值” 用来提高列表渲染的性能

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

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

? [1,2,3,44,5]

? [“1”,“222”,“adfdf”]

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”） 可以省略

对象循环

1 wx:for="{{对象}}" wx:for-item=“对象的值” wx:for-index=“对象的属性”

2 循环对象的时候 最好把 item和index的名称都修改一下

wx:for-item=“value” wx:for-index=“key”

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

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

block

1 占位符的标签

2 写代码的时候 可以看到这标签存在

3 页面渲染 小程序会把它移除掉

条件渲染wx:if

条件渲染

1 wx:if="{{true/false}}"

? 1 if , else , if else

? wx:if

? wx:elif

? wx:else

 <view wx:if="{{flase}}">1</view>
     <view wx:elif="{{flase}}">2 </view>
     <view wx:else> 3 </view>

hidden

? 1 在标签上直接加入属性 hidden

? 2 hidden="{{true}}"

使用的是display:none

什么场景下用哪个

? 1 当标签不是频繁的切换显示 优先使用 wx:if

? 直接把标签从 页面结构给移除掉

? 2 当标签频繁的切换显示的时候 优先使用 hidden

? 通过添加样式的方式来切换显示

? hidden 属性 不要和 样式 display一起使用

事件绑定

1 需要给input标签绑定 input事件

绑定关键字 bindinput

2 如何获取 输入框的值

通过事件源对象来获取

e.detail.value

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

3 把输入框的值 赋值到 data当中

不能直接

1 this.data.num=e.detail.value

2 this.num=e.detail.value

正确的写法

this.setData({

? num:e.detail.value

})

4 需要加入一个点击事件

1 bindtap

2 无法在小程序当中的 事件中 直接传参

3 通过自定义属性的方式来传递参数

4 事件源中获取 自定义属性

Page({
  data: {
    num: 0
  },
  // 输入框的input事件的执行逻辑
  handleInput(e) {
    // console.log(e.detail.value );
    this.setData({
      num: e.detail.value
    })
  },
  // 加 减 按钮的事件
  handletap(e) {
    // console.log(e);
    // 1 获取自定义属性 operation
    const operation = e.currentTarget.dataset.operation;
    this.setData({
      num: this.data.num + operation
    })
  },
 
})

WXSS

小程序中不需要主动引用样式文件

尺寸单位

page px = 750 rpx

1 px = 750 rpx / page

100 px = 750 rpx * 100 / page

假设 page = 375px

width:calc(750rpx * 100 / 375);

利用 一个属性 calc属性 css 和 wxss 都支持 一个属性

1 750 和 rpx 中间不要留空格

2 运算符的两边也不要留空格

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

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

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

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

样式导入

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

示例代码：

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

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

• style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />

• class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<view class="normal_view" />

less

/* 1 定义less变量 */
@color:yellow;
text{
  /* 2 使用变量 */
  color:@color;
}

view{
  .vie1{
    text{
      color: red;
    }
  }
}

/* 导入 */
@import "../../styles/reset.less";
view{
  color: @themeColor;
}
.main{
  /* 
  1 less中 支持 两种注释  多行  单行
  2 wxss 不能写 单行注释 因为 写了 和没写是一样！！！
   */
  /* font-size: 200px; */
  // font-size: 400px;
}

image

image 图片标签

1 src 指定要加载的图片的路径

图片存在默认的宽度和高度 320 * 240 原图大小是 200 * 100

2 mode 决定 图片内容 如何 和 图片标签 宽高 做适配

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

2 aspectFit 保持宽高比 确保图片的长边 显示出来 页面轮播图 常用

3 aspectFill 保持纵横比缩放图片，只保证图片的 短 边能完全显示出来。 少用

4 widthFix 以前web的图片的 宽度指定了之后 高度 会自己按比例来调整 常用

5 bottom。。 类似以前的backgroud-position

3 小程序当中的图片 直接就支持 懒加载 lazy-load

1 lazy-load 会自己判断 当 图片 出现在 视口 上下 三屏的高度 之内的时候 自己开始加载图片

 <image mode="scaleToFill" lazy-load src="https://tva2.sinaimg.cn/large/007DFXDhgy1g51jlzfb4lj305k02s0sp.jpg" />

swiper

1 轮播图外层容器 swiper

2 每一个轮播项 swiper-item

3 swiper标签 存在默认样式

1 width 100%

2 height 150px image 存在默认宽度和高度 320 * 240

3 swiper 高度 无法实现由内容撑开

4 先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度

原图的宽度和高度 1125 * 352 px

swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度

swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度

height: 100vw * 352 / 1125

5 autoplay 自动轮播

6 interval 修改轮播时间

7 circular 衔接轮播

8 indicator-dots 显示 指示器 分页器 索引器

9 indicator-color 指示器的未选择的颜色

10 indicator-active-color 选中的时候的指示器的颜色

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

swiper-item

仅可放置在swiper组件中，宽高自动设置为100%。

<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
    <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg" /> </swiper-item>
    <swiper-item> <image mode="widthFix" src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /> </swiper-item>
    <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/37/O1CN01syHZxs1C8zCFJj97b_!!37-0-lubanu.jpg" /> </swiper-item>
</swiper>

navigator

0 块级元素 默认会换行 可以直接加宽度和高度

1 url 要跳转的页面路径 绝对路径 相对路径

2 target 要跳转到当前的小程序 还是其他的小程序的页面

self 默认值 自己 小程序的页面

miniProgram 其他的小程序的页面

3 open-type 跳转的方式

1 navigate 默认值 保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面

2 redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。

3 switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

4 reLaunch 关闭所有页面，打开到应用内的某个页面

<navigator url="/pages/demo10/demo10"> 轮播图页面 </navigator>
 <navigator url="/pages/index/index"> 直接跳转到 tabbar页面 </navigator>
 <navigator open-type="redirect" url="/pages/demo10/demo10">  轮播图页面 redirect </navigator>
 <navigator open-type="switchTab" url="/pages/index/index">  switchTab直接跳转到 tabbar页面 </navigator>
 <navigator open-type="reLaunch" url="/pages/index/index">  reLaunch 可以随便跳 </navigator> 

rich-text

可以将字符串解析成 对应标签，类似 vue中 v-html

button

button 标签

1 外观的属性

1 size 控制按钮的大小

1 default 默认大小

2 mini 小尺寸

2 type 用来控制按钮的颜色

1 default 灰色

2 primary 绿色

3 warn 红色

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

4 loading 文字前显示正在等待图标

 <button >默认按钮</button>
 <button size="mini">  mini 默认按钮</button>
 <button type="primary"> primary 按钮</button> 
 <button type="warn"> warn 按钮</button> 
 <button type="warn" plain> plain 按钮</button> 
 <button type="primary" loading> loading 按钮</button> 

button 开发能力

open-type：

1 contact 直接打开 客服对话功能 需要在微信小程序的后台配置 只能够通过真机调试来打开

2 share 转发当前的小程序 到微信朋友中 不能把小程序 分享到 朋友圈

3 getPhoneNumber 获取当前用户的手机号码信息 结合一个事件来使用 不是企业的小程序账号 没有权限来获取用户的手机号码

1 绑定一个事件 bindgetphonenumber

2 在事件的回调函数中 通过参数来获取信息

3 获取到的信息 已经加密过了

需要用户自己待见小程序的后台服务器，在后台服务器中进行解析 手机号码，返回到小程序中 就可以看到信息了

4 getUserInfo 获取当前用户的个人信息

1 使用方法 类似 获取用户的手机号码

2 可以直接获取 不存在加密的字段

5 launchApp 在小程序当中 直接打开 app

1 需要现在 app中 通过app的某个链接 打开 小程序

2 在小程序 中 再通过 这个功能 重新打开 app

3 找到 京东的app 和 京东的小程序

6 openSetting 打开小程序内置的 授权页面

1 授权页面中 只会出现 用户曾经点击过的 权限

7 feedback 打开 小程序内置的 意见反馈页面

1 只能够通过真机调试来打开

<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>

icon

1 type 图标的类型

success|success_no_circle|info|warn|waiting|cancel|download|search|clear

2 size 大小

3 color 图标的颜色

图标组件

<icon  type="cancel" size="60" color="#0094ff"> </icon>

radio

1 radio标签 必须要和 父元素 radio-group来使用

2 value 选中的单选框的值

3 需要给 radio-group 绑定 change事件

4 需要在页面中显示 选中的值

 <radio-group bindchange="handleChange">
   <radio color="red" value="male">男</radio>
   <radio color="red" value="female" >女</radio>
 </radio-group>

check-box

<view>
  <checkbox-group bindchange="handleItemChange">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
      {{item.name}}
    </checkbox>

  </checkbox-group>
  <view>
    选中的水果:{{checkedList}}
  </view>
</view>

生命周期

应用生命周期

App({
  onPageNotFound(res) {
    wx.redirectTo({
      url: 'pages/...'
    }) // 如果是 tabbar 页面，请使用 wx.switchTab
  }
})

页面生命周期

Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onShow: function() {
    // Do something when page show.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
    // return custom share data when user share.
  },
  onPageScroll: function() {
    // Do something when page scroll
  },
  onResize: function() {
    // Do something when page resize
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

data

data 是页面第一次渲染使用的初始数据。

页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。