1.项目基本配置

（1）文件

1）主体文件

主体文件：够作用于整个小程序，影响到小程序的每个页面，主体文件必须放到项目的根目录下

由三部分组成：

• .appjs:小程序入口文件
• .app.json:小程序的全局配置文件
• .app.wxss:小程序的全局样式

2）页面文件

页面文件：是每个页面所需的文件，小程序页面文件都存放在 pages 目录下，一个页面一个文件夹

通常由四个文件组成，每个文件只对当前页面有效：

• .js:页面逻辑
• .wxml:页面结构
• .wxss:页面样式
• ..json:小页面配置

（2）渲染模式

在app.json中去掉render、rendererOptions、componentFramework，改变渲染模式

（3）新建页面方式

①在pages文件夹添加页面文件夹，再添加对应名称page

②在app.json中的pages直接添加

（4）配置文件

1）JSON

在小程序中，JSON扮演配置项角色

• app.json:小程序全局配置文件，用于配置小程序的一些全局属性和页面路由
• 页面.json:小程序页面配置文件，也称局部配置文件，用于配置当前页面的窗口样式、页面标题
• project.confg.json:小程序项目的配置文件，用于保存项目的一些配置信息和开发者的个人设置
• sitemap.json:配置小程序及其页面是否允许被微信索引，提高小程序在搜索引擎搜索到的概率

2）window 字段

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

  "window": {

    "navigationBarTitleText": "微信小程序" ,

    "navigationBarBackgroundColor": "#f3514f",

    "enablePullDownRefresh": true,

    "backgroundColor": "#efefef",

    "backgroundTextStyle":"light"

  },

3）tabBar 字段

定义小程序顶部、底部 tab 栏，用以实现页面之间的快速切换。

  "tabBar": {

    "selectedColor": "#f3514f",

    "color": "#666",

    "backgroundColor": "#efefef",

    "borderStyle":"white",

    "list": [

      {

        "text": "首页",

        "pagePath": "pages/index/index",

        "iconPath": "/assets/tabbar/index.png",

        "selectedIconPath": "/assets/tabbar/index-active.png"

      },

      {

        "text": "分类",

        "pagePath": "pages/cate/cate",

        "iconPath": "/assets/tabbar/cate.png",

        "selectedIconPath": "/assets/tabbar/cate-active.png"      

      },

      {

        "text": "购物车",

        "pagePath": "pages/cart/cart",

        "iconPath": "/assets/tabbar/cart.png",

        "selectedIconPath": "/assets/tabbar/cart-active.png"      

      },

      {

        "text": "我的",

        "pagePath": "pages/profile/profile",

        "iconPath": "/assets/tabbar/profile.png",

        "selectedIconPath": "/assets/tabbar/profile-active.png"      

      }

    ]

  },

4）页面配置

也称局部配置，每一个小程序页面也可以使用自己的.json 文件来对本页面的窗口表现进行配置

5）项目配置文件

project.config.json:项目配置文件，常用来进行配置公共的配置

project.private.config.json:项目私有的配置，常用来配置个人的配置

6）集成Sass语言

在project.config.json中的setting添加配置

    "useCompilerPlugins":[

      "sass"

    ],

将.wxss文件改为.scss文件即可添加样式

7）sitemap.json文件

• 没有 sitemap.json 则默认所有页面都能被索引
• ("action": "allow","page":"*“}是优先级最低的默认规则，未显式指明"disalow" 的都默认被索引

    "rules": [{

    "action": "allow",

    "page": "pages/index/index"

    }]

2.样式与组件 

（1）尺寸单位rpx

小程序规定任何手机型号屏幕宽度都是750rpx

（2）全局样式和局部样式

全局样式：指在 app.wxss 中定义的样式规则，作用于每一个页面，例如:设置字号、背景色、宽高等全局样式

局部样式：指在 page.wxss 中定义的样式规则，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

（3）组件案例

1）view

小程序的盒子，相当于div

2）轮播图

在小程序中，提供了 swiper和 swiper-item 组件实现轮播图

swiper:滑块视图容器，其中只能放置 swiper-item 组件

swiper样式

autoplay - 自动播放

interval - 播放时间

indicator-dots - 添加选中小点

indicator-color - 小点的颜色

indicator-active-color - 小点选中颜色

circular - 顺序播放

<!-- 轮播图区域 -->
<view class="swiper">
<swiper 
autoplay 
interval="1500" 
indicator-dots 
indicator-color="#fff"
indicator-active-color="#f3514f"
circular
><swiper-item><image src="../../assets/banner/banner-1.png" mode="" show-menu-by-longpress/></swiper-item><swiper-item><image src="../../assets/banner/banner-2.png" mode="" show-menu-by-longpress/></swiper-item><swiper-item><image src="../../assets/banner/banner-3.png" mode="" show-menu-by-longpress/></swiper-item>
</swiper>
</view>

.swiper{swiper{height: 360rpx;swiper-item{image{width: 100%;height: 100%;}}}
}

3）image

• src 属性:图片资源地址
• mode:图片裁剪、缩放的模式
• show.menu.by.longpress:长按图片显示菜单
• lazy-load:图片懒加载

4）text

• user-select:文本是否可选，用于长按选择文本
• space:显示连续空格
• text只能嵌套text

5）navigation

1.ur：当前小程序内的跳转链接
2.open-type:跳转方式

• navigate：保留当前页面，跳转到应用内的某个页面。但是不能跳到tabbar
• redirect：关闭当前页面，跳转到应用内的某个页面。但不能跳转到tabbar页面
• switchTab：跳转到tabBar页面，并关闭其他所有非labBar页面
• reLaunch:关闭所有页面，打开到应用内的某个页面
• navigaleBack:关闭当前页面，返回上一页面或多级页面

6）scroll-view

两个属性:

• scroll-x:允许横向滚动
• scroll-y:允许纵向滚动

7）背景图的使用

background-image

小程序背景图不能使用本地路径，需要用网络图片替换本地路径

3.事件绑定与事件对象

（1）事件绑定

bindtap="事件名"

（2）事件分类及阻止事件冒泡

冒泡事件：当一个组件的事件被触发后，该事件会向父节点传递

非冒泡事件：当一个组件的事件被触发后，该事件不会向父节点传递

使用bind会触发事件冒泡，想阻止可以使用catch

（3）事件传参

1）data传参

在组件上 通过 data-"的方式 定义需要传递的数据，其中*是自定义的属：

例如：<view data-id=“100"bindtap="handler”'/

currentTarget事件绑定者

target事件触发者

2）mark传参

在组件上使用 mark:自定义属性 的方式将数据传递给事件处理函数，例如:<view mark:id=“100"bindtap="handler”/>

4.wxml语法

1.声明和绑定数据

再Page（）方法的data对象进行声明定义

应用时采用{{}}方式

2.setDate（）修改数据

    this.setData({age:this.data.age+1})

添加数据：

const userinfo = {...this.data.userinfo,name:'yld',age:18}const userinfo = Object.assign(this.data.userinfo,{name:'yld'},{age:18})

删除数据：

delete this.data.userInfo.agethis.setDate({userinfo:this.data.inInfo
)}

3.双向数据绑定

在属性前添加model即可

4.列表渲染