小程序---初识

微信小程序—初始

文档解构说明

• sitemap.json 站点地图 微信搜一搜里面那些页面可以展示，那些不能

• project.config.json 项目配置

• app.js 全局的业务逻辑

• app.json 全局的配置

• app.wxss 全局的样式

• pages 存放页面的文件夹

  • index 首页页面文件夹
    • index.js 首页的业务逻辑
    • index.json 首页的配置
    • index.wxml 首页的布局（html)
    • index.wxss 首页的样式（css）
  • logs 日志页面文件夹

• utils 存放工具的文件夹

熟悉界面

• 略

详情设置

• 开发模式下，勾选不校验合法域名。。。
• 等

限制—必须知道

• 整体向程序分包大小 16M
• 主包大小 2M
• tabbar最多 5个
• tabbar最少 2个
• tabbar的icon大小 40k

小程序—开始

了解app.json文件配置

• pages 页面配置，那个页面在前面，那个默认打开

• weindow 窗口配置

  • backgroundTextStyle 背景文字颜色，下拉刷新能看到
  • navigationBarBackgroundColor 导航栏颜色
  • navigationBarTitleText 导航栏标题
  • navigationBarTextStyle 导航栏文字颜色，white 和 black

• style 样式类型

• sitemapLocation 站点地图的位置

• .json文件都不能注释

• .json文件最后一个须向不能有逗号

{
	// 默认打开那个文件页面，谁在第一个就默认打开那个页面
	  "pages":[
		"pages/index/index",
		"pages/logs/logs"
	  ],
	  // 窗口配置
	  "window":{
		// 背景文字颜色，下拉刷新能看到
		"backgroundTextStyle":"light",
		// 导航栏颜色
		"navigationBarBackgroundColor": "#fff",
		// 导航栏标题
		"navigationBarTitleText": "WeChat",
		// 导航栏文字颜色，white 和 black
		"navigationBarTextStyle":"black"
	  },
	  "style": "v2",
	  "sitemapLocation": "sitemap.json"
}

基础语法

• 在pages文件夹中创建一个base文件夹
• 在base文件夹中创建新的page，右键点击创建新的page
• 工具会自动创建相应的文件，
• 同时会在app.json文件中生成base的展示页面的路径，将其提升至最前

base.wxml文件—小程序布局的文件

• view 块级元素，默认垂直排列
• text 行内元素，默认水平排列

<!-- veiw标签 -->
<!-- view 块级元素，默认垂直排列 -->
<view>view1</view>
<view>view2</view>
<view>view3</view>

<!-- text标签 -->
<!-- text 行内元素，默认水平排列 -->
<!-- 添加类名，在wxss中进行选中以及设置样式 -->
<text class="title">text1</text>
<text>text2</text>
<text>text3</text>

base.wxss文件—小程序样式的文件

• 一般不使用标签选择器，因为选择的太多了
• 每一个页面都有一个page标签

/* pages/base/base.wxss */
/* 每一个页面都有一个page标签 */
/* page { padding: 15px;}
view {color: #f70;}
text {color: #777;} 
一般不适用标签选择器，因为选择的太多了
*/
.title {
  font-size: 44rpx;
  font-weight: 800;
  margin: 30rpx 0;
}
/* 小程序单位：px rpx vh vw 推荐使用rpx
  一个屏幕的宽度为：750rpx
*/

base.js文件—小程序的逻辑文件

• data 相当于vue中的data，用于储存数据

/**
* 页面的初始数据
*/
data: {
	msg : "你好小程序"
},

• 在base.wxml中使用数据
• 跟vue使用一样{{定义的数据变量}}

<view>{{msg}}</view>

小程序的简单js语法

• 跟vue使用差不多一样

<view>{{msg}}</view>
<view>运用简单js语法：{{2 + 3}}</view>
<view>msg长度：{{msg.length}}</view>
<!-- 可以写三目运算，但是不能写if -->
<view>js方法：{{msg.length > 5 ? '很长' : '简介'}}</view>
<view>字符串加引号：{{msg + "我喜欢"}}</view>

小程序的条件渲染

• 第一种：直接：wx:if="{{判断条件}}"，判断条件是真的就显示，假的就不显示

• 第二种：跟vue中的一样

  • 使用：wx:if="{{判断条件}}" 如果真的就显示，
  • 二级：wx:elif="{{判断条件}}" 否则如果是真的就显示
  • 结束：wx:else 否则就显示

<!-- 条件渲染 -->
<view>条件渲染</view>
<view wx:if="{{flag}}">欢迎主人回来</view>

<!-- 多分枝 -->
<view wx:if="{{num > 2}}">团长</view>
<view wx:elif="{{num > 1}}">连长</view>
<view wx:else>小兵</view>

小程序的for循环—列表渲染

/**
* 页面的初始数据
*/
data: {
	list : ["vue","react","angular","小程序"],
},

默认渲染—就不能循环嵌套了

• 列表渲染中，跟vue不一样，没有in ,但是有跟vue一样的key建
• item是默认写法，index也是默认

<!-- 列表渲染 -->
<view wx:for="{{list}}" wx:key="index">
  {{index + 1}}---{{item}}
</view>

自定义列表渲染—自定义item,index

• 设置自定义item：wx:for-item="自定义item名字"
• 设置自定义index：wx:for-index="自定义index名字"

<!-- 列表渲染---自定义 -->
<view>列表渲染--自定义</view>
<view
  wx:for="{{list}}"
  wx:for-item="myitem"
  wx:for-index="myindex"
  wx:key="myindex"
>
  {{myindex + 1}}---{{myitem}}
</view>

template 模板—局部模板

• 定义数据

data : {
	stu : [
		{name : "Deigo",age : 18},
		{name : "momo",age : 23}
	]
}

定义template模板

• <template name="模板的名字"> 模板里面的结构布局内容 </template>
• name : 定义模板的名字，调用时使用

<!-- 定义模板的名字是student -->
<template name="student">
  <view>
    <view>名称：{{name}}</view>
    <view>年龄：{{age}}</view>
  </view>
</template>

调用模板

• <template is="调用对应的模板的名字" data="{{数据}}"></template>
• is : 调用需要的模板名字
• data : 使用的数据，可以使用for循环，使用es6的解构方法

<template is="student" data="{{...stu[0]}}"></template>
<template is="student" data="{{...stu[1]}}"></template>

template 模板—全局模板（使用impor导入模板，模板分离）

创建模板

• 创建一个对应模板的wxml文件 eg:stu.wxml
• 在里面定义模板
• 可以定义多个，但名字不能相同

<!-- template 模板 -->
<view class="title">template 模板</view>
<template name="student">
  <view>
    <view>名称：{{name}}</view>
    <view>年龄：{{age}}</view>
  </view>
</template>

调用模板

• 使用 ：<import src="./stu.wxml" /> 导入对应模板，必须自闭合
• 调用 ：<template is="调用对应的模板的名字" data="{{数据}}"></template>

<template is="student" wx:for="{{stu}}" wx:key="index" data="{{...item}}"></template>

template 模板—include导入模板

定义模板

• 创建一个对应模板的wxml文件 eg:PRC.wxml
• 在里面定义模板

<!-- template 模板 -->
<view class="title">template 模板</view>
<template name="PRC">
  <view>
    <view>PRC</view>
    <view>中华人民共和国</view>
  </view>
</template>

调用模板

• 导入模板：<include src="模板地址" /> 自闭合
• include相当于，把对应的模板复制过来了

<include src="./PRC.wxml" />

import 与 include 的区别

• include 复制src中的内容除了模板 如果src中也有include可以嵌套
• import 主要功能是导入模板