您现在的位置是:网站首页>>微信>>微信小程序

微信小程序项目目录结构介绍

发布时间:2019-08-07 10:22:50作者:wangjian浏览量:157点赞量:0

    最近公司在做小程序相关的项目,之前一直没有研究过小程序,正好趁此机会来研究研究,这里我们先来了解小微信小程序项目的基本目录结构,当我们使用微信开发者工具创建了一个小程序项目后,这时候微信开发者工具会帮我们创建一个基本的微信小程序项目框架,如下:

    image.png

    一:page:

    page目录下放置的就是各个小程序页面的页面信息,每个小程序的页面信息由四个文件组成,其中js和wxml文件是必须的

    image.png

    1:js文件:主要的作用对页面进行注册,指定页面的初始数据、生命周期回调、事件处理函数等

    在js文件中我们一般使用page构造器来注册页面,例:

    Page({
      data: {
        text: "This is page data."
      },
      onLoad: function(options) {
        // 页面创建时执行
      },
      onShow: function() {
        // 页面出现在前台时执行
      },
      onReady: function() {
        // 页面首次渲染完毕时执行
      },
      onHide: function() {
        // 页面从前台变为后台时执行
      },
      onUnload: function() {
        // 页面销毁时执行
      },
      onPullDownRefresh: function() {
        // 触发下拉刷新时执行
      },
      onReachBottom: function() {
        // 页面触底时执行
      },
      onShareAppMessage: function () {
        // 页面被用户分享时执行
      },
      onPageScroll: function() {
        // 页面滚动时执行
      },
      onResize: function() {
        // 页面尺寸变化时执行
      },
      onTabItemTap(item) {
        // tab 点击时执行
        console.log(item.index)
        console.log(item.pagePath)
        console.log(item.text)
      },
      // 事件响应函数
      viewTap: function() {
        this.setData({
          text: 'Set some data for updating view.'
        }, function() {
          // this is setData callback
        })
      },
      // 自由数据
      customData: {
        hi: 'MINA'
      }
    })

    page构造器一般适用于简单页面,较为复杂的页面微信小程序推荐使用Component构造器,Component构造器和page构造器的主要区别是:Component构造器方法需要放在 methods: { } 里面,其他的基本没有任何区别

    2:wxml文件:页面构造等同于h5语法的html文件

    这里介绍几种基本的wxml语法:

    (1)数据绑定

    //wxml
    <view> {{message}} </view>
    //js
    Page({
      data: {
        message: 'Hello World!'
      }
    })

    (2)列表渲染

    <!--wxml-->
    <view wx:for="{{array}}"> {{item}} </view>
    //js
    Page({
      data: {
        array: [1, 2, 3, 4, 5]
      }
    })

    (3)条件渲染

    <!--wxml-->
    <view wx:if="{{view == 'A'}}"> A </view>
    <view wx:elif="{{view == 'B'}}"> B </view>
    <view wx:else="{{view == 'C'}}"> C </view>
    //js
    Page({
      data: {
        view: 'A'
      }
    })

    3:json文件:页面窗口配置(在页面配置文件中进行配置之后会覆盖app.json文件中window中的相同配置项)

    基本配置如下:

    {
      "navigationBarBackgroundColor": "#ffffff",//配置导航栏背景颜色
      "navigationBarTextStyle": "black",//配置导航栏标题颜色,仅支持 black/white
      "navigationBarTitleText": "微信接口功能演示",//配置导航栏标题文字内容
      "backgroundColor": "#eeeeee",//配置窗口的背景色
      "backgroundTextStyle": "light"//配置下拉 loading 的样式,仅支持 dark/light
    }

    其他详细配置可以参考微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

    4:wxss文件:页面样式表相当去css文件

    wxss文件的一些基本信息可以参考:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html,这里就不进行介绍了

    二:untils目录:一般放置一些公用的方法

    例:

    // common.js
    function test(name) {
      return `Hello ${name} !`
    }
    module.exports.test= test
    const test = require('/utils/common.js')//引入所需文件
    Page({
      test: function() {
        common.test('World')
      },
    })

    三:app.js:注册小程序,绑定生命周期回调函数、错误监听和页面不存在监听函数等

    例:

    // app.js
    App({
       //监听小程序初始化
      onLaunch (options) {
        // Do something initial when launch.
      },
      //监听小程序启动或切前台
      onShow (options) {
        // Do something when show.
      },
      //监听小程序切后台
      onHide () {
        // Do something when hide.
      },
      //错误监听函数
      onError (msg) {
        console.log(msg)
      },
    //页面不存在监听函数
      onPageNotFound(res) {
        wx.redirectTo({
          url: 'pages/...'
        }) // 如果是 tabbar 页面,请使用 wx.switchTab
      },
      //定义全局变量
      globalData: {
        userInfo: 'test'
       }
    })

    整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 示例,获取App上的数据或调用开发者注册在 App 上的函数

    例:

    // xxx.js
    const app = getApp()
    console.log(app.globalData.test)

    四:app.json:小程序全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等

    基本配置如下:

    {
      //页面路径列表
      "pages": [
        "pages/index/index",
        "pages/logs/index"
      ],
      //全局的默认窗口表现 
      "window": {
        "navigationBarTitleText": "Demo"
      },
      //底部 tab 栏的表现
      "tabBar": {
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页"
        }, {
          "pagePath": "pages/logs/logs",
          "text": "日志"
        }]
      },
      //网络超时时间
      "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
      },
      //是否开启 debug 模式,默认关闭
      "debug": true
    }

    其他详细配置可以参考:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

    五:app.wxss文件:小程序公共样式表

    六:project.config.json文件:小程序项目配置文件

    基本配置如下:

    {
      //小程序项目描述
      "description": "项目配置文件",
      //打包配置选项
      "packOptions": {
        "ignore": []
      },
      //项目设置
      "setting": {
        "urlCheck": true,
        "es6": true,
        "postcss": true,
        "minified": true,
        "newFeature": true,
        "coverView": true,
        "autoAudits": false,
        "checkInvalidKey": true,
        "checkSiteMap": true,
        "uploadWithSourceMap": true,
        "babelSetting": {
          "ignore": [],
          "disablePlugins": [],
          "outputPath": ""
        },
        "nodeModules": true
      },
      //编译类型
      "compileType": "miniprogram",
      //基础库版本
      "libVersion": "2.7.7",
      //项目的 appid
      "appid": "wxf39f6c161ed9f559",
      //项目名字
      "projectname": "test",
      //调试配置选项
      "debugOptions": {
        "hidedInDevtools": []
      },
      //是否是游客
      "isGameTourist": false,
      //模拟器类型
      "simulatorType": "wechat",
      //模拟器插件库版本
      "simulatorPluginLibVersion": {},
      //条件
      "condition": {
        "search": {
          "current": -1,
          "list": []
        },
        "conversation": {
          "current": -1,
          "list": []
        },
        "game": {
          "currentL": -1,
          "list": []
        },
        "miniprogram": {
          "current": -1,
          "list": []
        }
      }
    }

    详细配置可以参考:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html

    七:sitemap.json文件:配置小程序及其页面是否允许被微信索引

    例:

    1:允许所有页面都会被微信索引(默认情况)

    {
      "rules":[{
        "action": "allow",
        "page": "*"
      }]
    }

    2:配置指定页面不被检索,其余页面允许被索引

    {
      "rules":[{
        "action": "disallow",
        "page": "path/to/page"//不被允许检索页面路径
      }]
    }

    3:配置指定页面允许被检索,其余页面不允许被索引

    {
      "rules":[{
        "action": "allow",
        "page": "path/to/page",
        "params": ["a", "b"],
        "matching": "inclusive"
      }, {
        "action": "allow",
        "page": "*"
      }]
    }

    如上就为微信小程序项目的基本结构

0 +1