微信小程序开发基础

微信小程序

第一节 认识微信小程序

01 创建Hello World小程序

Question1： Hello World怎么显示在页面上的？

Answer: 在小程序中，每一个组件对应一个文件夹，放在pages目录下，比如/pages/index对应的就是index组件，组件包括四个部分内容，分别是js文件、json文件、wxml文件、wxss文件。要想Hello World显示在页面上，需首先在js文件中定义相应的属性，如下图所示，我们在js文件中的Page属性中给data属性设置了一个motto的属性，值为Hello World，紧接着我们会在wxml文件中通过{{}}语法去引用我们的属性，如{{motto}}

文件名称	文件作用
.js文件	小程序中的数据及定义的一些函数、方法
.json文件	小程序中的配置
.wxml文件	小程序中的页面视图
.wxss文件	小程序中页面的样式

第二节 微信小程序框架的目录结构

​ 微信小程序框架，学习一个框架，大家首先要把自己的基础打牢，特别是js相关方面的知识基础一定要有。

Question1：小程序中的目录结构都代表什么意思？

Answer：如下图所示

01 app.js文件

02 app.json文件

​ app.json文件可以对常用的功能进行设置：配置页面路径、配置窗口表现、配置标签导航、配置网络超时、启用新版组件样式、配置debug模式、配置跳转的小程序列表等。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "Weixin",
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "/pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "/pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

配置页面路径
	在app.json中pages属性中放入对应组件的路径，是进行页面访问的必要条件。

配置窗口表现
	navigationBarBackgroundColor		导航条背景色
	navigationBarTitleText				导航条文字
	navigationBarTextStyle				导航条文字颜色
	enablePullDownRefresh				窗口是否可以下拉刷新
	backgroundColor						窗口的背景色
	backgroundTextStyle					下拉背景字体或者loading样式
	
配置标签导航
	tabBar是一个对象，主要有selectedColor、backgroundColor、borderStyle、list四个属性。

03 app.wxss文件

​ 小程序公共样式表，是对css进行了扩展，使用方式和css一样。

04 project.config.json文件

{
    "description": "项目配置文件",
    "packOptions": {
        "ignore": []
    },
    "setting": {
        "bundle": false,
        "userConfirmedBundleSwitch": false,
        "urlCheck": true,
        "scopeDataCheck": false,
        "coverView": true,
        "es6": true,
        "postcss": true,
        "compileHotReLoad": false,
        "lazyloadPlaceholderEnable": false,
        "preloadBackgroundData": false,
        "minified": true,
        "autoAudits": false,
        "newFeature": false,
        "uglifyFileName": false,
        "uploadWithSourceMap": true,
        "useIsolateContext": true,
        "nodeModules": false,
        "enhance": true,
        "useMultiFrameRuntime": true,
        "useApiHook": true,
        "useApiHostProcess": true,
        "showShadowRootInWxmlPanel": true,
        "packNpmManually": false,
        "enableEngineNative": false,
        "packNpmRelationList": [],
        "minifyWXSS": true,
        "showES6CompileOption": false
    },
    "compileType": "miniprogram",
    "libVersion": "2.24.1",
    "appid": "wx682898bb37c1b879",
    "projectname": "%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%AF%BE%E6%9C%AC%E6%A1%88%E4%BE%8B",
    "debugOptions": {
        "hidedInDevtools": []
    },
    "scripts": {},
    "staticServerOptions": {
        "baseURL": "",
        "servePath": ""
    },
    "isGameTourist": false,
    "condition": {
        "search": {
            "list": []
        },
        "conversation": {
            "list": []
        },
        "game": {
            "list": []
        },
        "plugin": {
            "list": []
        },
        "gamePlugin": {
            "list": []
        },
        "miniprogram": {
            "list": []
        }
    }
}

05 框架页面文件

​ 一个小程序框架页面文件由5个文件组成，分别是js文件（页面逻辑）、json文件（页面配置）、wxml文件（页面结构）、wxs文件（小程序脚本文件）、wxss（页面样式表）。每一个页面都是一个独立的文件夹。

06 小案例

app.json文件

{
  "pages": [
    "pages/movie/movie",
    "pages/cinema/cinema",
    "pages/find/find",
    "pages/me/me"

  ],
  "window": {
    "navigationBarBackgroundColor": "#666666",
    "navigationBarTextStyle":"black",
    "navigationBarTitleText": "猫眼",
    "backgroundColor": "#909090",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "selectedColor": "#88FF88",
    "backgroundColor": "#AAAAAA",
    "borderStyle": "black",
    "position": "top",
    
    "list": [
      {
        "pagePath": "pages/movie/movie",
        "text": "电影"
      },
      {
        "pagePath": "pages/cinema/cinema",
        "text": "影院"
      },
      {
        "pagePath": "pages/find/find",
        "text": "发现"
      },
      {
        "pagePath": "pages/me/me",
        "text": "我的"
      }
    ]
      
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}