微信小程序汇总02

### 第一个小程序项目

下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)，新建项目（不使用云开发 JavaScript模板）

### app.json

pages：定义小程序的页面，相当于路由功能

window：配置页面属性

backgroundColor：背景颜色，主要针对下拉刷新的背景

backgroundTextStyle：下拉刷新提示符号的颜色 light | dark

navigationBarBackgroundColor：导航栏背景颜色

navigationBarTitleText：导航栏文字

navigationBarTextStyle：导航栏文字风格 black | white

tabBar：设置页面导航

position：设置导航位置 bottom | top

color：导航文字默认颜色

selectedColor：导航文字选中颜色

list：定义导航项 2-5个

pagePath：导航对应的页面地址

iconPath：导航图标地址

selectedIconPath：选中状态图标地址

text：导航文字

### 小程序的基本语法

view => div 块级元素 text => span p 行内元素

新增rpx相对单位 1rpx 就是屏幕宽度的 1/750

### 数据渲染

普通渲染 {
{ msg }} 在两对花括号内写js表达式/变量

条件渲染 wx:if wx:elif wx:else

列表渲染 wx:for wx:for-item wx:for-index

“`html

{
{num}}

{
{1+2}}

<view wx:if="{
{false}}”>欢迎回来

请登录

<view wx:if="{
{fen>90}}”>优秀

<view wx:elif="{
{fen>80}}”>不错

<view wx:elif="{
{fen>70}}”>良好

<view wx:elif="{
{fen>=60}}”>及格

不及格

<view wx:for="{
{list}}” wx:key=”{
{item}}”>{
{item}}

<view wx:for="{
{list}}” wx:for-index=”ind” wx:for-item=”ite”>{
{ind+1}}-{
{ite}}

“`

### 模板引入

##### template

template是一个模板标签：

“`html

// 使用name定义模板的名字

这是一个模板

// 使用is调用对应的模板

// 传递参数在模板内容中直接使用数据

姓名：{
{name}}

年龄：{
{age}}

// 调用模板时使用data定义数据

“`

##### import

import 只能引入模板文件

##### include

include 引入除模板以外的其他内容

### 组件

button 按钮组件

image 图片组件在src中定义图片路径 mode = “widthFix” 宽度固定高度自使用

swiper 滑块视图组件用于轮播图里面只能放swiper-item组件 [官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html)

scroll-view 可滚动视图区域使用竖向滚动时，需要给scroll-view一个固定高度

icon 图标组件

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/9032668d0e.html

微信小程序汇总02

相关推荐