微信小程序——基础知识

小程序初始化

获取小程序AppID、密钥

目录结构介绍

一个小程序至少由俩个文件组成app.js和app.json 1.app.js小程序逻辑 2.app.json小程序全局配置 3.app.wxss小程序公共样式表 4.project.config.json开发项目时工具配置文件。

一个小程序页面由四个文件组成

	传统web	小程序
结构	HTML	wxml
样式表	CSS	wxss
逻辑	Javascript	js
配置	无	json

初始化页面的俩个警告⚠️

⚠️根据 sitemap 的规则[0]，当前页面 [pages/index/index] 将被索引 解决方案：小程序项目配置文件 project.config.json 的 setting 中配置字段 "checkSiteMap": false

"setting": {
    "checkSiteMap": false
},

⚠️获取 wx.getUserInfo 接口后续将不再出现授权弹窗，请注意升级 解决方案：清空App.js

全局配置路由、导航栏和tabBar

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

路由 Pages

路由 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 | 微信开放文档

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

window属性说明文档

属性	描述
backgroundTextStyle	下拉 loading 的样式，仅支持 dark / light
navigationBarBackgroundColor	导航栏背景颜色，如 #000000
navigationBarTitleText	导航栏标题文字内容`
navigationBarTextStyle	导航栏标题颜色，仅支持 black / white
enablePullDownRefresh	是否开启当前页面的下拉刷新 true / false

代码实例

{
    "window": {
        "backgroundTextStyle": "dark",
        "navigationBarBackgroundColor": "#0081ff",
        "navigationBarTitleText": "教育Top10",
        "navigationBarTextStyle": "white",
        "enablePullDownRefresh": true
    },
}

如何设置某个单页面的导航栏？

自定义顶部栏,文字、背景色，在该单页面的json里添加如下：

{
	"usingComponents": {},
    "navigationBarTitleText": "课程列表",
    "navigationBarBackgroundColor": "#0081ff",
    "navigationBarTextStyle": "white"
}

隐藏顶部栏，在该单页面的json里添加如下：

{
    "navigationStyle": "custom"
}

底部 tabBar

底部 tabBar | 微信开放文档 小程序是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，及切换时显示的对应页面。

tabBar属性说明文档

属性	描述
color	tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	tab 的背景色，仅支持十六进制颜色
borderStyle	tabbar上边框的颜色， 仅支持 black / white
custom	自定义 tabBar，见详情
list	tab 的列表，详见 list 属性说明

list 数组，包含 tab 最少 2 个、最多 5 个

list属性	描述
pagePath	路由：跳转到指定页面
text	底部导航文字
iconPath	底部导航图标、未选中状态
selectedIconPath	底部导航图标、选中状态

代码实例

{
    "tabBar": {
        "color": "#333",
        "selectedColor": "#0081ff",
        "borderStyle": "black",
        "backgroundColor": "#fff",
        "list": [
            {
                "pagePath": "pages/tabBar/tabBar_home/tabBar_home",
                "text": "首页",
                "iconPath": "images/Tabbar/home.png",
                "selectedIconPath": "images/Tabbar/home_cur.png",
            },
            {
                "selectedIconPath": "images/Tabbar/my_cur.png",
                "iconPath": "images/Tabbar/my.png",
                "pagePath": "pages/tabBar/tabBar_myCenter/tabBar_myCenter",
                "text": "个人中心"
            }
        ],
    }
}

基础组件

view 视图容器

text 文本

<text>纯文本</text>组件之间只能包含纯文本，在text中写其他标签，将会被忽略掉

<text 
    class="info" 
    id="zbc" 
    style="" 
    bindtap="_fun" 点击事件
    hidden="true" 显示隐藏[微信小程序--hidden不生效原因及解决方案?]
    data-user="user" 自定义组件
>
    hello world
</text>

image 图片

微信小程序 Image 图片实现宽度100%，高度自适应mode="widthFix"

<image class="img" src="../../images/hello.png" mode="widthFix">

.img{width: 100vw;}

Flex 布局

Flex 布局兼容性

Flex 布局属性

要使用弹性布局，通过 display: flex 或者 display: inline-flex 来将此元素定义为弹性容器。

1. flex-direction 决定元素的排列方向

   • row 默认值，主轴为水平方向，（左 => 右）
   • column 主轴为垂直方向，（上 => 下）

2. flex-wrap 决定元素如何换行

   • nowrap 默认值，只显示一行，不换行
   • wrap 多行显示

3. justify-content 定义主轴为水平方向，分布方式。

   • flex-start 水平方向起点开始对齐
   • flex-end 水平方向结束位置对齐
   • center 居中对齐
   • space-between 两端对齐，平均间隔
   • space-around 每个子元素都有相等的外边距，相邻元素外边距不会叠加

4. align-items 定义主轴为垂直方向，分布方式。

   • flex-start 垂直方向起点开始对齐
   • flex-end 垂直方向结束位置对齐
   • center 垂直方向居中对齐

5. flex: 1 权重，分配主轴上剩余的空间（有图）

<view style="display:flex;">
    <view class="A" style="width: 140rpx;height: 80rpx; flex: 1;"></view>
    <view class="B" style="width: 140rpx;height: 80rpx;"></view>
    <view class="C" style="width: 140rpx;height: 80rpx;"></view>
    <view class="D" style="width: 140rpx;height: 80rpx;"></view>
</view>

数据绑定

数据绑定 | 微信开放文档

简单绑定

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

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

三元运算

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

算数运算

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

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

view中的内容为 3 + 3 + d。

是否同意该协议表单按钮

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

特别注意： 不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

列表渲染wx:for

列表渲染 | 微信开放文档

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item 数据绑定使用 {{}} 将变量包起来，可以作用于：

轮播图wx:for

<swiper>
    <swiper-item wx:for="{{banner}}" wx:key="{{index}}">
        <image src="{{item.img}}"></image>
    </swiper-item>
</swiper>

Page({
    data: {
        banner: [{
            img: '../../images/swiper-1.jpeg',
        }, {
            img: '../../images/swiper-2.jpeg',
        }]
    }
})

上述代码的简略版

<swiper>
    <swiper-item wx:for="{{2}}" wx:key="{{index}}">
        <image src="../../images/swiper-{{index + 1}}.jpeg"></image>
    </swiper-item>
</swiper>

wx:for-item 和 wx:for-index

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

<swiper>
    <swiper-item wx:for="{{banner}}" wx:for-index="idx" wx:for-item="itemName">
        <image src="{{itemName.img}}"></image>
    </swiper-item>
</swiper>

wx:key

wx:key 是列表中唯一的字符串或数字，且不能动态改变。例如：

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>

Page({
    data: {
        objectArray: [
            { id: '时间', unique: 'unique_5' },
            { id: '速度', unique: 'unique_4' },
            { id: '路程', unique: 'unique_3' },
            { id: 2, unique: 'unique_2' },
        ],
    },
})

小鹿咖啡的菜单【实例】

    <scroll-view scroll-y class="rightBar">
        <view class="rightBar_Item" wx:for="{{foodList}}" wx:key="{{index}}">
            <view class="series_Title flex">
                <view class="drink_Title_name">{{item.title}}</view>
                <view class="drink_Title_line"></view>
            </view>
            <view class="drink_List">
                <view class="drink_Item flex" wx:for-item="it" wx:for="{{item.food}}" wx:key="{{index}}">
                    <view class="drink_Img">
                        <image class="drink_Img" src="{{it.img}}"></image>
                        <view class="tip" wx:if="{{it.tip}}">{{it.tip}}</view>
                    </view>
                    <view class="drink_Cont">
                        <view class="drink_Title">
                            <view class="drink_Ch_Title">{{it.name}}</view>
                            <view class="drink_En_Title">{{it.enname}}</view>
                        </view>
                        <view class="ju_between">
                            <view class="drink_price">¥{{it.price}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </scroll-view>

Page({
    data: {
        "foodList": [
            {
                "id": 1,
                "title": "大师咖啡",
                "food": [
                    {
                        "id": 1,
                        "img": "http://r.photo.store.qq.com/psb?/V12jhopW1tjEiY/SvHL13tH2g5UKUmVrbCjAPs4sLNBvAo7fhdJGpEU1.s!/r/dFQBAAAAAAAA",
                        "name": "摩卡",
                        "enname": "Mocha",
                        "price": "27",
                        "tip": "买2增1"
                    },
                ]
            },
            {
                "id": 2,
                "title": "小鹿茶",
                "food": [
                    {
                        "id": 1,
                        "img": "http://r.photo.store.qq.com/psb?/V12jhopW1tjEiY/VoBwYjGp2dIkV1owMWjVr4rm6Tp3wl8H1Gsa7n5hh08!/r/dFQBAAAAAAAA",
                        "name": "活力柠檬红宝石茶",
                        "enname": "Lemon Ruby Tea",
                        "price": "24",
                        "tip": "买2增1"
                    },
                    {
                        "id": 2,
                        "img": "http://r.photo.store.qq.com/psb?/V12jhopW1tjEiY/o7p7XoYAGaeMH6EtQNPVbU8tHFnKZitOcl9RarOcqNA!/r/dAgBAAAAAAAA",
                        "name": "桃桃山雾乌龙茶",
                        "enname": "White & Yellow Peach Oolong Tea",
                        "price": "24"
                    }
                ]
            }
        ]
    },
})

条件渲染wx:if

条件渲染 | 微信开放文档

wx:if使用方法

wx:if="{{false}}",wx:if="{{true}}"

在小程序里面识别boolean值时，只要属性的值 不为空时，boolean就判断为真，就算里面随便几个字符，例如 wx:if="11223" ，也判断为真， 如果需要为false,就必须采用数据绑定的方式{{false}},才能被小程序解析为假。

在框架中，使用 wx:if="" 来判断是否需要渲染该代码块： 也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 85}}">优秀</view>
<view wx:elif="{{length > 60}}">及格</view>
<view wx:else>不及格</view>

Page({
    data: {
        length: 61,
    }
})

结果：及格

的使用

注意：<block/> 并不是一个组件，它仅仅是一个包装元素，将多个组件包装起来,不会在页面中做任何渲染，只接受控制属性。wx:if 和 wx:for   含有<block/> 的写法

    data: {
        modalToggle: false,
    },

    <block wx:if="{{modalToggle}}">
    	<view class="modalWrap">
        	<view class="modal"></view>
    	</view>
	</block>

不含有<block/> 的写法

    data: {
        modalToggle: false,
    },

	<view class="modalWrap" wx:if="{{modalToggle}}">
    	<view class="modal"></view>
	</view>

---

教育Top10收藏列表【实例】

页面描述：当有数据时，显示左侧列表。当没有数据时，则显示右侧内容

<block wx:if="{{list.length>0}}">
    <block wx:for="{{list}}" wx:key="idx">
        <view>{{item}}</view>
    </block>
</block>
<block wx:else>
    <view>暂时未收藏哦~</view>
</block>

Page({
    data: {
        list: ['月落乌啼霜满天','江枫渔火对愁眠']
    },
})

wx:if vs hidden

1.wx:if 在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，确保条件块在切换时销毁或重新渲染。 2.hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

总结:wx:if 有更高的切换消耗，而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden

hidden不生效原因及解决方案?

<view hidden="true" style="display:flex;">
    <text>text1</text>
    <text>text2</text>
</view>

你会发现hidden没生效。经我实验发现hidden元素对块状布局才生效，所以这段代码里导致hidden没生效的罪魁祸首是display:flex。把这个去掉就可以了。

如果一定要用flex布局怎么办？

其实这里想用hidden无非就是想影藏这个布局，display:none也能做到隐藏。这里可以用一个取巧的方法，动态设置display属性，示例如下：

<view style="display:{{hideview ? 'none' : 'flex'}};">
    <text>text1</text>
    <text>text2</text>
</view>

这里的hideview是在对应的js里是一个变量，由js来动态控制。

小程序事件

单击事件

`<button class="BtnCur" bindtap="ManagementBtn">管理</button>`