第二章 微信小程序开发基础总结

学习目标

        1、了解小程序的基本目录结构

        2、了解小程序的开发框架

        3、掌握小程序的文件类型

        4、掌握小程序的相关配置信息

小程序的基本目录结构

pages是所有页面的主页面，每个页面一个文件夹，它有2个子目录

utils是公具包 pages所有都可以用utils里的文件

app.js是小程序的主逻辑文件，主要用来注册小程序全局实例

app.json小程序公共设置文件，配置小程序全局设置

app.wxss小程序主样式表文件

.js文件 页面逻辑文件

.wxml 页面结构文件

.wxss 页面样式表文件

.json 页面配置文件

小程序的开发框架

视图层 

        视图层是所有.wxml文件与.wxss文件的集合：.wxml文件用于描述页面的结构；.wxss文件用于描述页面的样式。

数据层

        数据层在逻辑上包括页面临时数据或缓存、文件存储（本地存储）和网络存储与调用

创建小程序页面

1、先将pages中的"index"删除

2、打开app.json将里面的"pages/index/index

3、在项目主目录下新建一个don目录，并在don目录下新建don.js、don.json、don.wxml和don.wxss

打开app.json输入以下代码

{
  "pages": [
    "pages/don/don",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

打开don.json输入

{
  
}

打开don.js输入 （注意P得是大写）

Page({

})

在don.wxml输入内容

谁不玩原神啊！

最后运行效果如下

配置文件

全局配置文件内容：

window配置项

  "window":{
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle":"black",
    "navigationBarTitleText": "原神",
    "backgroundColor": "#fff",
    "backgroundTextStyle": "light"
  },

tabBar配置项

lists配置项

"tabBar": {
   "color": "#666666",
   "selectedColor": "#ff0000",
   "borderStyle":"black",
   "backgroundColor": "#ffffff",
   "list": [
     {
       "pagePath": "pages/don/don",
       "iconPath": "images/pic01.jpg",
       "selectedIconPath": "images/pic02.jpg",
       "text": "首页"
     },
     {
      "pagePath": "pages/logs/logs",
      "iconPath": "images/pic03.jpg",
      "selectedIconPath": "images/pic02.jpg",
      "text": "新闻"
     }
   ]

 配置logs.js 代码如下

Page({
  data:{
    name:"lwk",
    age:"30",
    birthday:[{year:1988},{month:11},{date:18}],
    object:{hobby:"computer"}
  }
})

配置 logs.wsml 代码如下

<view>姓名：{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期：
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好:{{object.hobby}}</view>

效果如图

算术运算  逻辑运算  三元运算

算术运算是在年龄加上num

逻辑运算是判断年龄是否>90

三元运算是判断年龄是否等于1 是的话输出"happy" 不是的话输出"nohappy"

<view>算术运算：{{age+num}}</view>
<view>逻辑运算：{{age>90}}</view>
<view>三元运算：{{age==1  ?  'happy' :  'nohappy'}}</view>

效果如图

条件数据绑定

当年龄>10时输出1 当年龄==10时输出0 否则输出-1

<view>年龄:{{age}}</view>
<view wx:if="{{age>10}}">1</view>
<view wx:elif="{{age==10}}">0</view>
<view wx:else>-1</view>

效果如图

列表数据绑定

wx:if

    students:[
      {nickname:"Tom",height:180, weight:150},
      {nickname:"Ame",height:188, weight:100}
    ]


<view wx:for="{{students}}">
    <text>姓名:{{item.nickname}}</text>
    <text>身高:{{item.height}}</text>
    <text>体重:{{item.weight}}</text>
</view>

效果如图

模板

定模模板

模板代码由wxml组成 因此定义也在wxml文件中

<template name="模板名">

注意 定义之后一定要记得使用

<template name="stu">
<view wx:for="{{students}}">
  <text>姓名:{{item.nickname}}</text>
    <text>身高:{{item.height}}</text>
    <text>体重:{{item.weight}}</text></view>
</template>
 <template is="stu" data="{{students}}"></template>

效果如图

冒泡事件

WXSS常用属性