微信小程序（一）

之前小项目的数据集还在收集制作中，有点麻烦，到最后准备顺便做出一个小玩具（小程序的形式）。不过使用现成的小程序模板改起来有点复杂，而且很多语法和网页开发所使用的不太一样，因此一边学一边整理一下WXML+wxss的内容。。

目录

• 简介
• 项目结构
• 操作技巧
• 组件
• 数据绑定与事件绑定
• 条件渲染
• 列表渲染
• WXSS模板样式
• 窗口与tabBar配置(.json)
• 网络数据请求
• 页面导航
  • 声明式导航
  • 编程式导航
• 导航传参
  • 声明式
  • 编程式
  • 在onLoad中接受导航参数
• 组件通信
  • 父子组件

简介

1. 与普通网页开发的区别

   • 运行环境不同
   • API不同（可以调用微信提供的各种API）
   • 开发模式不同（使用微信开发者工具）

2. 宿主环境——手机微信

   • 通信模型：渲染层与逻辑层、逻辑层与通信服务器
   • 运行机制
     • 启动：将代码包下载到本地$\longrightarrow$解析app.json全局配置文件$\longrightarrow$执行app.js入口文件（调用App()创建小程序实例）$\longrightarrow$渲染小程序首页，启动完成
     • 页面渲染：加载.json$\longrightarrow$加载.wxml模板和.wxss样式$\longrightarrow$执行.js，调用Page()创建页面实例，渲染完成
   • 组件
   • API：事件监听API（on开头监听事件触发）、同步API（Sync结尾）、异步API（通过回调函数接收结果）

3. WXML与HTML的区别

   • 标签名称不同——WXML常用的标签名有：view（类似div）、text（类似span）、image（类似img）、navigator（类似a）

   • 属性节点不同

     • <a href="#">HTML链接</a>

     • <navigator url="">WXML链接</navigator>

   • 提供了类似于Vue中的模板语法：数据绑定、列表渲染、条件渲染

4. WXSS与CSS的区别

   • 新增了rpx尺寸单位
   • 提供了全局的样式（app.wxss)和局部样式(<pagename>.wxss)
   • WXSS不支持某些CSS选择器

5. 协同工作：管理员、项目成员（运营者、开发者、数据分析者）、体验成员

6. 软件版本：开发版本$\rightarrow$体验版本$\rightarrow$审核中的版本$\rightarrow$线上版本

项目结构

• pages文件夹：存放所有小程序的页面
  • .js文件：页面的入口（脚本）文件，通过调用Page()函数来创建并运行页面
  • .json文件：当前页面的配置文件（会覆盖全局配置）
  • .wxml文件：当前页面模板结构文件
  • .wxss文件：当前页面的样式表文件（局部样式，权重大于等于全局样式时覆盖全局样式）
• utils文件夹：存放工具性质得模块
• app.js：项目入口文件，通过调用App()函数来启动整个小程序
• app.json：项目全局配置文件
  • pages：小程序所有页面的路径
  • window：全局定义小程序所有页面得到背景色、文字颜色等
  • style：全局定义小程序组件所使用的样式版本
  • sitemapLocation：指明sitemap.json的位置
• app.wxss：项目全局样式文件
• project.config.json：项目配置文件，记录对开发工具所做的个性化配置
• sitemap.json：配置小程序及其页面是否允许被微信索引（爬取）

操作技巧

1. 预览方式：可以通过模拟器预览，也可以微信扫码在真机上预览。

2. 页面配置：创建页面直接在app.json中的pages列表中添加即可；pages列表的第一个元素会被渲染为项目首页。

组件

1. 视图容器类：

• view：普通视图区域
• scroll-view：可滚动视图区域
• swiper和swiper-item：轮播图容器组件和轮播图item组件

<!--pages/list/list.wxml-->
<swiper class="swiper-container" indicator-dots autoplay interval="3000" circular>
    <swiper-item>
        <view class="item">A</view>
    </swiper-item>
    <swiper-item>
        <view class="item">B</view>
    </swiper-item>
    <swiper-item>
        <view class="item">C</view>
    </swiper-item>
</swiper>
<text>\n</text>
<view class="container1">
    <view>图片检测</view>
    <view>视频检测</view>
</view>
<text>\n</text>
<scroll-view class="container2" scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
    <view>D</view>
</scroll-view>

/* pages/list/list.wxss */
 
.swiper-container{
    height: 150px;
}
.item{
    line-height: 150px;
    height: 100px;
    text-align: center;
}
.swiper-container swiper-item:nth-child(1){
    background-color: aqua;
}
.swiper-container swiper-item:nth-child(2){
    background-color:lime;
}
.swiper-container swiper-item:nth-child(3){
    background-color:mediumpurple;
}
 
.container1 view{
    width:175px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
.container1 view:nth-child(1){
    background-color: aqua;
}
.container1 view:nth-child(2){
    background-color: lightpink;
}
.container1 view:nth-child(3){
    background-color:darkturquoise;
}
.container1{
    height: 100px;
    display:flex;
    justify-content:space-around;
}
 
.container2 view{
    width:150px;
    height: 85px;
    text-align: center;
    line-height: 100px;
}
.container2 view:nth-child(1){
    background-color: aqua;
}
.container2 view:nth-child(2){
    background-color: lightpink;
}
.container2 view:nth-child(3){
    background-color:darkturquoise;
}
.container2 view:nth-child(4){
    background-color: rgb(238, 71, 71);
}
.container2{
    border: 1px solid rgb(0, 0, 0);
    width: 150px;
    height: 200px;
}

2. 文本组件

• text：文本组件

  <text user-select>1051434511</text>

• rich-text：富文本组件

  <rich-text nodes="<h1 style='color: red;'>Title</h1>"></rich-text>

3. 按钮组件（button）

<button type="primary" size="mini" plain>主色调迷你镂空按钮</button>

4. 图片组件（image）

<image src="/images/bs.jpg" mode="aspectFit"></image>

5. 导航栏（navigation-bar）

---

数据绑定与事件绑定

<view>
    <button type="default" bindtap="countchange" data-n="{{3}}">点击+n</button>
    <input value="{{msg}}" bindinput="ipt"></input>
    <text>{{msg}}</text>
</view>

data: {
        count: 0,
        msg: '你好，'
    },
    //计数加一
    ipt(e){
        this.setData({
            msg:e.detail.value
        })
    },
    countchange(e){
        this.setData({
            count:this.data.count+e.target.dataset.n
        })
    }

条件渲染

使用 wx:if={{condition}} 判断是否渲染（适用于复杂控制条件）；可以用block标签包裹多个代码段进行控制；还可以使用hidden="{{condition}}"判断是否将样式设为隐藏（适用于频繁切换）

<view wx:if="{{sex==1}}">男</view>
<view wx:elif="{{sex==0}}">女</view>
<view wx:else>保密</view>

列表渲染

<view wx:for="{{a1}}">索引号：{{index}},内容：{{item}}</view> //或
<view wx:for="{{a1}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">索引号：{{idx}},内容：{{itemName}}</view>

WXSS模板样式

• 相比CSS，WXSS扩展了rpx尺寸单位与@import样式导入的特性。
  • rpx：小程序独有，用来解决屏适配的尺寸单位；屏幕宽度等分为750rpx
  • 导入样式表：@import "<相对路径>";

窗口与tabBar配置(.json)

• window

1. 小程序窗口包括：导航栏（navigationBar）、背景、主体三个区域

2. 属性名	含义
   navigationBarTitleText	导航栏标题文字内容
   navigationBarBackgroundColor	导航栏背景颜色
   navigationBarTextStyle	导航栏标题颜色（只有black/white）
   backgroundColor	窗口背景色
   backgroundTextStyle	下拉loading样式（dark/light)
   enablePullDownRefresh	是否开启全局下拉刷新
   onReachBottomDistance	页面上拉触底事件出发时距页面底部距离（px）

   常用配置项：

• tabBar（2~5个tab页签）

  1. 类型
  • 底部tabBar
  • 顶部tabBar（不显示icon）
  2. 代码示例

    "tabBar":{
    	"backgroundColor":"#000000",
    	"color":"#6f6f70",
    	"selectedColor":"#f2ea5a",
    	"list":[
    		{
    			"pagePath":"pages/list/list",
    			"selectedIconPath":"images/tabBar/cameraS.png",
    			"iconPath":"images/tabBar/camera.png",
    			"text":"首页"
    		},{
    			"pagePath":"pages/img/img",
    			"selectedIconPath":"images/tabBar/stasticS.png",
    			"iconPath":"images/tabBar/stastic.png",
    			"text":"统计"
    		}
    	]
    }

网络数据请求

出于安全考虑，小程序官方限制只能请求HTTPS类型的接口且必须将接口域名添加到信任列表。

• 配置request合法域名

• 发起GET/POST请求：wx.request()

  wx.request({
    url: 'example.php', // 仅为示例，并非真实的接口地址
    method: '',  // 请求方式
    data: { // 发送到服务器的数据
      x: '',
      y: ''
    },
    header: {
      'content-type': 'application/json' // 默认值
    },
    success (res) {
      console.log(res.data)
    }
  })

• 在页面刚加载的时候请求数据：在onLoad中直接调用获取数据的函数（如：this.getList()）

• 跳过request合法域名校验（通过本地设置，仅限开发与调试阶段使用）

页面导航

页面导航实现页面间的相互跳转。

声明式导航

通过点击$<navigator>$导航组件实现页面跳转

1. 导航到tabBar页面

   <navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

2. 导航到普通页面

   <navigator url="/pages/logs/logs"  open-type="navigate"<!--默认属性，可以省略-->>跳转到日志页面</navigator> 

   （navigate为默认属性，可以省略）

3. 后退导航

   <navigator open-type="navigateBack" delta="1">返回</navigator>

   (delta为返回层级数，默认为1)

编程式导航

调用小程序的导航API实现页面跳转

1. 导航到tabBar页面

   调用$wx.switchTab(Object object)$方法：

   wx.switchTab({
     url: '/index',
     //success: 成功回调函数
     //fail: 失败回调函数
     //complete: 调用结束回调函数
   })

2. 导航到普通页面

   调用$wx.navigateTo(Object object)$方法：

   //略

3. 后退导航

   // 
   wx.navigateBack({
     delta: 2
     //success: 成功回调函数
     //fail: 失败回调函数
     //complete: 调用结束回调函数
   })

导航传参

声明式

参数放在url中：

• 参数与路径用 ? 分隔
• 参数键值之间用 ===== 分隔
• 不同参数之间 & 分隔

编程式

同样的规则将参数放在url中。

在onLoad中接受导航参数

data: {
    query: () 
}
// ...
onLoad: function(options) {
    console.log(options)
    this.setData({
        query: options //给query赋值
    })
}

组件通信

父子组件

• 属性绑定(父向子传值)：properties:{}
• 事件绑定
• 获取组件实例：this.selectComponent("id或class选择器")