小程序 文件类型介绍

原创 2018年04月16日 23:35:29

pages下有index.logs.utils3个文件夹和app.js.app.json.app.wxss.project.config.json文件
其中app文件为全局文件比如设置app颜色配置等
这么多文件大致分为3类后缀 js.wxml.wxss
js:函数点击事件网络加载等
wxxml:骨架节点组件等ui
wxss:布局文件

app.js

/app.js
App({
  //小程序启动初始化只走一次
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

app.json文件 配置界面路径比如你创建了一个新界面要在这理绑定路径
window里面可以设置整个app的颜色

{
  "pages":[
  //如果新建界面写在最前面那么优先加载
    "pages/index/index",
    "pages/logs/logs",
    //这是我新件的一个界面位于pages文件夹中的twoVC文件夹中名字叫twovc
    "pages/twoVC/twovc"
  ],
  "window":{
   "backgroundTextStyle":"left",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "你好",
    "navigationBarTextStyle":"black"
  }
}

project.config.json文件为配置信息比如你换了一台电脑项目还是一个项目那么要重新配置,有了它不需要了

index文件夹
有3个文件index.js index.wxml index.wxss
js:函数处理点击事件的
wxml:节点组件
wxss:样式
html+javascript+css
index.js文件配置如

Page({

  /**
   * 页面的初始数据
   */
  data: {
    title:""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
     title:options.id,
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }

})
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30211165/article/details/79968541

软件工程杂志《非程序员》第一期

软件工程杂志《非程序员》第一期名    称: 《非程序员》第一期设    计: UMLCHINA编    者: UMLCHINA联系邮件: think@umlchina.com 版    本: 第一期...
  • dbbdggdbbdgg
  • dbbdggdbbdgg
  • 2001-05-27 12:05:00
  • 665

微信小程序quickstart项目中有关userInfoReadyCallback的解释

userInfoReadyCallback 在index.js中定义,在app.js中使用 附app.js代码: //app.js App({ onLaunch: function () { ...
  • yangshuolll
  • yangshuolll
  • 2017-10-19 14:03:28
  • 7501

开发微信小程序:创建小程序实例

创建小程序实例 点击开发者工具左侧导航的“编辑”,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中...
  • jiadabin
  • jiadabin
  • 2017-08-02 22:07:16
  • 4025

学习小程序整理

1 三大文件 .js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件2app.js :监听并处理小程序的生命周期函数、声明全局变量 例//app.js App({ ...
  • xiyangyang8110
  • xiyangyang8110
  • 2017-08-04 11:52:41
  • 1422

回调函数callback…………

function callBack(){//回调函数 document.getElementById("sta").style.display="block"; if(xmlHttp.readyS...
  • big1989wmf
  • big1989wmf
  • 2017-04-12 15:59:48
  • 56

小程序获取用户信息

//index.js //获取应用实例 const app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, ...
  • zjhwqx
  • zjhwqx
  • 2017-09-27 17:06:39
  • 3281

小程序逻辑层

逻辑层(App Service) 小程序开发框架的逻辑层由 JavaScript 编写。 逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。 在 JavaScript 的基础上,我们做了一...
  • qiphon3650
  • qiphon3650
  • 2017-09-21 14:52:13
  • 414

给自己的微信小程序客服回话添加头像!

在这里教大家如何在微信小程序客服回话里显示用户的头像和昵称。先给大家看下获取头像与昵称后的实际效果:第一步,百度搜索芝麻小客服 或者 点击此链接 打开之后点击 一键接入小客服 按钮,按照提示接入小程序...
  • qq_25990395
  • qq_25990395
  • 2018-04-10 07:35:13
  • 65

微信小程序授权登录解决方案(含未通过授权解决方案)

getUserInfoF:function(){ var that = this; wx.getSetting({ success: (res) =&g...
  • zjy660358
  • zjy660358
  • 2018-03-27 09:28:39
  • 26

微信小程序之-----重新调用权限获取

我呢,最近才研究小程序的开发,遇到了一个对新手来说比较难的问题1、怎么在进入小程序的时候 就获取用户权限2、如果用户拒接获取权限,怎么在重新调用,而不是让用户删除小程序后再重新进入3、返回后重新获取用...
  • qq_24915227
  • qq_24915227
  • 2018-03-14 14:25:38
  • 283
收藏助手
不良信息举报
您举报文章:小程序 文件类型介绍
举报原因:
原因补充:

(最多只允许输入30个字)