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 - 顺序播放

        .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="事件名"