用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序——基础知识

Rolan 2019-11-26 00:02

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

目录结构介绍

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

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

传统web小程序
结构HTMLwxml
样式表CSSwxss
逻辑Javascriptjs
配置json

初始化页面的俩个警告:warning:

:warning:根据 sitemap 的规则[0],当前页面 [pages/index/index] 将被索引 解决方案:小程序项目配置文件 project.config.json 的 setting 中配置字段 "checkSiteMap": false
"setting": {
    "checkSiteMap": false
},
复制代码

:warning:获取 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属性说明文档

属性描述
colortab 上的文字默认颜色,仅支持十六进制颜色
selectedColortab 上的文字选中时的颜色,仅支持十六进制颜色
backgroundColortab 的背景色,仅支持十六进制颜色
borderStyletabbar上边框的颜色, 仅支持 black / white
custom自定义 tabBar,见 详情
listtab 的列表,详见 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 来动态控制。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 菜鸡来寻码 来自: 掘金