微信小程序——基础知识

目录结构介绍

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

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

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

"setting": {
    "checkSiteMap": false
},复制代码

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

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

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

路由 Pages

路由 Pages | 微信开放文档

项目开发目录为：

├── app.js
├── .json
├── .wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── .js
│   │   ├── .json
│   │   └── .wxss
│   └── logs
│       ├── logs.wxml
│       └── .js
└── utils
复制代码

则需要在?app.json?中写

{
    "pages": [
        "pages/index/index","pages/logs/logs"
    ],}
复制代码

顶部导航 window

顶部导航 window | 微信开放文档

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

window属性说明文档

代码实例

如何设置某个单页面的导航栏？
自定义顶部栏,文字、背景色，在该单页面的?json
里添加如下：
{
	"usingComponents": {},0);">"课程列表",0);">"white"
}
复制代码
隐藏顶部栏，在该单页面的?json?里添加如下：
底部 tabBar
底部 tabBar | 微信开放文档?小程序是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，及切换时显示的对应页面。
tabBar属性说明文档
color

tab 上的文字默认颜色，仅支持十六进制颜色


tab 上的文字选中时的颜色，仅支持十六进制颜色


tab 的背景色，仅支持十六进制颜色


tabbar上边框的颜色， 仅支持 black / white


自定义 tabBar，见?详情



tab 的列表，详见 list 属性说明



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


list属性
路由：跳转到指定页面


底部导航文字


底部导航图标、未选中状态


底部导航图标、选中状态



基础组件
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?来将此元素定义为弹性容器。


flex-direction?决定元素的排列方向
row
column



flex-wrap?决定元素如何换行
justify-content?定义主轴为水平方向，分布方式。

flex-start
flex-end
center
space-between
space-around



align-items?定义主轴为垂直方向，分布方式。
flex: 1?权重，分配主轴上剩余的空间（有图）


<view style="display:flex;">
    <view class="A" style="width: 140rpx;height: 80rpx; flex: 1;"></view>
    <"B" style="width: 140rpx;height: 80rpx;"></"C" style="D" style=view>
</view>
复制代码
数据绑定
数据绑定 | 微信开放文档
简单绑定
<view> {{ message }} </view>
复制代码
Page({
  data: {
    message: 'Hello MINA!'
  }
})
复制代码
三元运算
算数运算
<view> {{a + b}} + {{c}} + d </view>
复制代码
view中的内容为 3 + 3 + d。

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

列表渲染wx:for
列表渲染 | 微信开放文档
在组件上使用?wx:for?控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为?index?，数组当前项的变量名默认为?item?数据绑定使用?{{}}?将变量包起来，可以作用于：
轮播图wx:for
Page({
    data: {
        banner: [{
            img: '../../images/swiper-1.jpeg',{
            img: '../../images/swiper-2.jpeg',}]
    }
})
复制代码
上述代码的简略版
wx:for-item?和?wx:for-index

使用 wx:for-item 可以指定数组当前元素的变量名， 使用 wx:for-index 可以指定数组当前下标的变量名：
wx:key
wx:key?是列表中唯一的字符串或数字，且不能动态改变。例如：
data: {
        objectArray: [
            { id: '时间',unique: 'unique_5' },{ id: '速度',0);">'unique_4' },0);">'路程',0);">'unique_3' },51); font-weight: 700;">id: 'unique_2' },],})
复制代码
小鹿咖啡的菜单【实例】
Page({
    data: {
        "foodList": [
            {
                "id": "title": "大师咖啡",0);">"food": [
                    {
                        "img": "http://r.photo.store.qq.com/psb?/V12jhopW1tjEiY/SvHL13tH2g5UKUmVrbCjAPs4sLNBvAo7fhdJGpEU1.s!/r/dFQBAAAAAAAA",0);">"name": "摩卡",0);">"enname": "Mocha",0);">"price": "27",0);">"tip": "买2增1"
                    },]
            },0);">"小鹿茶",0);">"http://r.photo.store.qq.com/psb?/V12jhopW1tjEiY/VoBwYjGp2dIkV1owMWjVr4rm6Tp3wl8H1Gsa7n5hh08!/r/dFQBAAAAAAAA",0);">"活力柠檬红宝石茶",0);">"Lemon Ruby Tea",0);">"24",{
                        "http://r.photo.store.qq.com/psb?/V12jhopW1tjEiY/o7p7XoYAGaeMH6EtQNPVbU8tHFnKZitOcl9RarOcqNA!/r/dAgBAAAAAAAA",0);">"桃桃山雾乌龙茶",0);">"White & Yellow Peach Oolong Tea",0);">"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 块：
data: {
        length: 61,}
})
复制代码
结果：及格
的使用
注意：?<block/>?并不是一个组件，它仅仅是一个包装元素，将多个组件包装起来,不会在页面中做任何渲染，只接受控制属性。?wx:if?和?wx:for?含有?<block/>?的写法
block wx:if={{modalToggle}}">
    	<"modalWrap">
        	<"modal"></view>
    	</view>
	</block>

复制代码
不含有?<view "modalWrap" wx:if="{{modalToggle}}">
    	<view "modal"></view>
	</view>
复制代码

教育Top10收藏列表【实例】
页面描述：当有数据时，显示左侧列表。当没有数据时，则显示右侧内容
list: ['月落乌啼霜满天',0);">'江枫渔火对愁眠']
    },249); border: 0px; font-size: 14px;'>wx:if?vs??hidden

1.?wx:if?在初始渲染条件为??false?，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。所以当??wx:if?的条件值切换时，框架有一个局部渲染的过程，确保条件块在切换时销毁或重新渲染。 2.?hidden?就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
总结:?wx:if?有更高的切换消耗，而??hidden?有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用??hidden
hidden不生效原因及解决方案?
你会发现?hidden?没生效。经我实验发现?hidden?元素对块状布局才生效，所以这段代码里导致?hidden?没生效的罪魁祸首是?display:flex?。把这个去掉就可以了。

如果一定要用flex布局怎么办？
其实这里想用?hidden?无非就是想影藏这个布局，?display:none?也能做到隐藏。这里可以用一个取巧的方法，动态设置?display?属性，示例如下：
};">
    <view>
复制代码
这里的?hideview?是在对应的?js?里是一个变量，由?js?来动态控制。
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!