[小程序] 微信开发者工具下载与安装 WXMLfor if 模板页面引用 tabBar

帐号设置

官网: https://mp.weixin.qq.com/

申请成功后，回到网站首页，使用注册的邮箱账号和密码（或微信扫码）进入到微信小程序官方控制平台中。

进入微信小程序官方控制平台后，主要为了得到开发所要用到的appid和secret这两项值。这两项值后续需要用到：

需要注意：AppSecret不会明文存储并显示在页面上，需要点击生成按钮在显示弹窗后自行保存并记录，一旦离开当前页面（或刷新）就无法查看已经生成的AppSecret，只能对原先的进行重置。

微信开发者工具

1、工具的下载与安装

工具集成了公众号网页调试和小程序调试两种开发模式，开发者可以编译小程序在电脑上看到模拟器编译效果，此处根据电脑类型自行下载如下：

2、helloworld项目

在桌面上双击运行微信开发者工具，参考以下图示进行项目创建：

创建好项目后显示效果如下：

小程序目录结构及配置

1、目录结构

小程序包含一个描述整体程序（全局）的app和多个描述各自（局部）页面的page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必填	作用
app.js	是	小程序逻辑-小程序入口文件
app.json	是	小程序公共配置文件
app.wxss	否	小程序公共样式表

一个小程序page页面由四个文件组成，分别是：

文件类型	必填	作用
js	是	页面逻辑
wxml	是	页面结构
wxss	否	页面样式表
json	否	页面配置

2、全局配置文件app.json

参考网址：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

app.json文件用来对微信小程序进行全局配置的，设置小程序页面数量、窗口表现、设置底部或顶部菜单、网络请求超时时间等。

app.json由于是json文件，所以其中不能添加任何注释，key和value字符串必须用双引号引起来，数组或对象最后一定不能有逗号。

常用的全局配置：

• pages：注册小程序的页面路径列表

数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。

• window：全局的默认窗口表现

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

• tabBar：小程序底部或顶部菜单定义（换句话说，小程序的菜单是通过json配置来实现的）

• networkTimeout：小程序网络请求超时时间设置

• usingComponents：自定义组件配置

app.json

{
    
    
  "pages": [
    "pages/index/index",
    "pages/fen/fen",
    "pages/car/car",
    "pages/mine/mine"
  ],

  "window": {
    
    
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "每日优鲜",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh":true
  },
  "tabBar": {
    
    
    "color":"#000",
    "selectedColor": "#ff0000",
    "list": [
      {
    
    
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath":"static/img/index1.png",
        "selectedIconPath": "static/img/index2.png"
      },
      {
    
    
        "pagePath": "pages/fen/fen",
        "text": "分类",
        "iconPath":"static/img/fen1.png",
        "selectedIconPath": "static/img/fen2.png"
      },
      {
    
    
        "pagePath": "pages/car/car",
        "text": "购物车",
        "iconPath":"static/img/car1.png",
        "selectedIconPath": "static/img/car2.png"
      },
      {
    
    
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath":"static/img/mine1.png",
        "selectedIconPath": "static/img/mine2.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

3、全局样式文件app.wxss

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

/**app.wxss**/
/* app.wxss 全局css样式*/
/* 引入公共css */
/* @import '/static/css/common.wxss'; */
page{
    
    
  width: 750rpx;
  font-size: 24rpx;
  background:deeppink
}

4、小程序生命周期

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

// app.js
// 注册整个小程序实例对象 
// 必须调用且只能调用一次
App({
    
    
  // 整个小程序得生命周期函数
  onLaunch() {
    
    
     console.log('监听小程序初始化')
  },
  onShow(){
    
    
    console.log('监听小程序启动或切前台。')
  },
  onHide(){
    
    
    console.log('监听小程序切后台。')
  },
  globalData: {
    
    
    nameArr: ['张文静','岳小慧','宋江燕']
  }
})

5、全局数据 globalData

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。

在app.js 文件中，定义globalData 属性，该属性中存放的数据在每个页面都可以获取和修改。

// 在app.js 中定义全局数据
globalData: {
    
    
    nameArr: ['张文静','岳小慧','宋江燕']
  }

// 在 index.js 中获取
const app = getApp();
onLoad: function (options) {
    
    
   console.log(app) //获取 App 实例，并获取全局变量数据 globalData
 },
handleFn(){
    
    
    app.globalData.nameArr.push('逯鑫') //可以在事件中修改 globalData全局数据
}

WXML语法

WXML：页面的视图结构文件。简单来说，其是基于html的基础之上，小程序框架自己设计的一套标记语言。使用这套标记语言，结合JS逻辑部分、样式部分（WXSS），可以允许开发者构建出页面的效果。

注意点：该语言标签严格要求，标签有开始，必须也有结束。

1、WXML数据绑定

a. 页面中的数据都是来自于页面的逻辑文件（js文件）的data属性

例如，我们也在page/index/index.js文件中新增一个数据“msg”，其值是“HTML5”。则如下：

b. 数据可以在页面结构文件（wxml文件）中展示，例如将刚才index页面的msg数据在index.wxml中展示输出（类似于vue的插值表达式）

<text class="user-motto">{
   
   {msg}}</text>

c. 使用 setData 方法来对数据进行修改。在使用时注意this关键词指向的问题，因为这个方法是对象实例里的方法。例如，假设需要msg数据在页面加载完成后5秒钟将值修改为“H5”，则代码如下：

针对数据的修改一般写在页面的生命周期函数中。

语法：

this.setData({
    
    
    msg: "H5"
});

2、WXML循环

**语法：**其循环的实现与vue及其相似，也是通过标签的属性来实现循环的。其属性如下：

• wx:for：该属性表示循环，其属性值是要循环的数据，默认下标名为 index，当前项为 item
• wx:key：使用wx:for 渲染列表，必须循环体的唯一标识符，建议可以使用数组每一项得id。
• wx:for-index：（可选）用于自定义索引变量名，默认值是index
• wx:for-item：（可选）用于自定义循环到的元素的变量名，默认值是item

关于新建page的操作提示：

• 在pages目录下新建一个空的文件夹
• 右键新建好的空的文件夹，选择菜单中的“新建page”
• 输入页面的名称，回车即可生成page需要的四个文件及其初始化的内容
• 根据需要决定是否要设置页面为默认页面（在app.json文件中修改新建页面的顺序）

定义一个数据源，稍后演示循环操作：

data: {
    
    
    users: ['张三', '李四', '王五'],
        obj: [
        {
    
    
            id: 1,
            user: 'zhangsan'
        },
        {
    
    
            id: 2,
            user: 'lisi'
        },
        {
    
    
            id: 3,
            user: 'wangwu'
        }
       ]
},

参考代码：

<!--pages/wxfor/wxfor.wxml-->
<text>pages/wxfor/wxfor.wxml</text>

<!-- 在wxml里面不用div，div可以用view标签替代 -->
<!-- 使用默认的索引和元素变量循环 -->
<view wx:for="{
     
     {users}}" wx:key="index">
    {
   
   {index}} - {
   
   {item}}
</view>

<!-- 使用自定义的索引和元素变量循环 -->
<view wx:for="{
     
     {users}}" wx:for-index="key" wx:for-item="val" wx:key="key">
    {
   
   {key}} - {
   
   {val}}
</view>

<!-- 循环数组对象的操作 -->
<view wx:for="{
     
     {obj}}" wx:key="index">
    {
   
   {item.id}} - {
   
   {item.user}}
</view>

3、WXML判断

语法：与vue一样，小程序中的判断也是通过特定的属性来实现的。属性是：wx:if、wx:elif、wx:else。

例如，有以下的数据源：

data: {
    
    
    age: 19
}

在视图结构代码中依据是否成年的规则去判定age是否成年了：

<!--pages/wxif/wxif.wxml-->
<text>pages/wxif/wxif.wxml</text>

<view wx:if="{
   
   {age > 18}}">
    成年了，可以去蹦迪了
</view>

<view wx:elif="{
   
   {age == 18}}">
    刚好成年，不建议现在去蹦迪
</view>

<view wx:else>
    未成年，回去写作业去
</view>

4、模板页面引用

• WXML提供模板（template）可以在模板中定义代码片段，然后在不同的地方调用。

• 使用 name 属性，作为模板的名字。然后在内定义代码片段，使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

• WXML提供两种文件引用方式：import（高级）和include

• import：有点类似以于二阶段，可以把一些常用自定义函数，写到一个文件中，在用的时候可以导入进来，然后再去调用里面的特定的函数。（按需使用）

• include：将目标文件中所有的代码（除了template标签段、wxs标签段）统统在引入的位置直接用（直接使用）

4.1 页面内使用模板：

当前页面内定义模板，并在当前页面使用，数据item 为当前页js 中定义的数据。

   <!-- 定义模板 -->
   <template name="msgItem">
      <view>
         <text> {
   
   {index}}: {
   
   {msg}} </text>
         <text> Time: {
   
   {time}} </text>
      </view>
   </template>
   
    <!-- 使用模板 -->
   <template is="msgItem" data="{
   
   {...item}}"/>
   
   <!-- js -->
   Page({
    data:{
      item: {
        index: 0,
        msg: '我是模板',
        time: '2016-09-15'
      }
    },

例子

4.2 页面外使用模板

• 把模板定义到外部，然后多个页面间可以共用使用定义的模板

• import可以在当前文件中使用目标文件定义的template（代码区块[标签]，可以有多个）。

语法：

1. 在pages 目录下新建 页面temp，其代码如下：

<!--pages/temp/temp.wxml-->
<view>
  <template name="msgItem">
      <view>
         <text> {
   
   {index}}: {
   
   {msg}} </text>
         <text> Time: {
   
   {time}} </text>
      </view>
   </template>
</view>

2. 在其他页面如首页中引入模板temp，并使用模板，数据item1为使用页数据（如首页）

    <!-- 引入模板 -->
    <import src="../temp/temp.wxml"/>
    <!-- 使用模板 -->
    <template is="msgItem" data="{
   
   {...item1}}"/>

例子

注意事项：

• import的标签使用可以存在套娃行为，也就是说可以允许出现以下情况：在C文件中importB文件，在B文件中importA文件
• import在套娃的时候需要注意，其使用template存在作用域的概念的。import导入，在使用时只能使用导入的目标文件的template，不能使用导入文件中的导入的目标文件的template。（不允许隔代使用）

4.3 include

include可以将目标文件除了<template/> <wxs/>外的整个代码引入，相当于是拷贝到include位置。

注意：只能引入静态html代码，如果代码中涉及data中得变量，需要在引入到得当前页面data中重新定义该变量。

语法：

1. 在pages 中新建 temp1页面

<!--pages/temp1/temp1.wxml-->
<view class="box">
    <view wx:for='{
   
   {fruitArr}}' wx:key='index'>
        {
   
   {item}}
    </view>
</view>

2.在使用的页面中引入模板：

<!-- 使用include 引入模板 -->
<include src="../temp1/temp1.wxml" />

例子

小结：

• include形式不支持对目标文件的template和wxs区块的解析
• include引入即使用，import在引入后还需要再去单独使用

WXSS样式

WXSS是一套样式语言，用于描述WXML的组件样式（有点CSS描述HTML样式的感觉）。

为了适应广大的前端开发者，WXSS具有CSS大部分特性。同时为了更适合开发微信小程序，WXSS对CSS进行了扩充以及修改。例如：

• 新增了尺寸单位
  • WXSS在底层支持新的尺寸单位rpx，可以根据屏幕宽度进行自适应，响应式尺寸单位
  • 小程序中全屏尺寸数值是 : 750rpx
  • 与px的换算关系：

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

• 提供了全局的样式和局部样式

  • 定义在app.wxss中的样式为全局样式，作用于每一个页面
  • 在page的wxss文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss中相同的选择器

• 此外WXSS仅支持部分CSS选择器，目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有class="intro"的组件
#id	#firstname	选择拥有id="firstname"的组件
element	view	选择所有view组件
element, element	view, checkbox	选择所有文档的view组件和所有的checkbox组件
::after	view::after	在view组件后边插入内容
::before	view::before	在view组件前边插入内容

• 单位 rpx 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。在 iPhone6 上，屏幕宽度为375px，1rpx = 0.5px = 1像素，开发建议用 iPhone6 作为视觉稿的标准。

ps设置375。1px相当于2rpx
ps设置750。1px相当于1rpx

tabBar

文档地址：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

tabBar就是小程序底部的导航菜单，小程序的tabBar使用比较简单，只需要在全局配置文件app.json中加上下面的配置即可，参考代码如下：

{
    
    
    "tabBar": {
    
    
        "color": "color",
        "selectedColor": "selectedColor",
        "list": [
          {
    
    
            "pagePath": "pagePath",
            "iconPath": "iconPath",
            "selectedIconPath": "selectedIconPath",
            "text": "text"
          },
          {
    
    
            "pagePath": "pagePath",
            "iconPath": "iconPath",
            "selectedIconPath": "selectedIconPath",
            "text": "text"
          },
        ]
    }
}

参考配置实例：

{
    
    
    "tabBar": {
    
    
        "color": "#C0C0C0",
        "selectedColor": "#000000",
        "backgroundColor": "#FFFFFF",
        "list": [
            {
    
    
                "pagePath": "pages/include/include",
                "text": "导入",
                "iconPath": "./assets/images/more.png",
                "selectedIconPath": "./assets/images/more-active.png"
            },
            {
    
    
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "./assets/images/cookbook.png",
                "selectedIconPath": "./assets/images/cookbook-active.png"
            }
        ]
    }
}

注意点：

• pages数组中的默认页面（第一个元素）一定要出现在tabbar配置的list数组中，如果没有则底部菜单是不显示的；
• 如果默认页面在菜单的list数组中，但是不是list数组的一个元素，那么默认页面在第一个元素，那个菜单就会被默认选中；
• 正常来讲，pages数组中的第一个元素（页面），即菜单list数组中的第一个栏目；

代码：