• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    微信小程序学习之初探小程序

    前言

    9月21日,传言已久的微信应用号正式以“微信公众平台小程序”的名义发布,依然采取了内测制度,目前只有少部分开发者可使用。“微信之父”张小龙在朋友圈介绍,这种小程序是一种不需要下载安装即可使用的应用,用户扫一扫或者搜一下即可打开应用,对用户来说应用触手可及,对微信来说体现了用完即走的理念。应用号出来之后,有人说微信这次要颠覆AppStore了,开发者直接基于微信开发小程序就可以了,不用开发什么App了。更有人说微信就是一个操作系统,真的如此吗?不管怎样,我们下面先来一探微信小程序。

    一 项目文件结构

    当打开微信小程序的Demo的时候,我个人习惯是先看整个项目的文件结构,先大致弄清这部分是干什么的,那部分又是干什么的,微信小程序基本的文件结构如下图:


    首先我们一眼就可以看到,在项目根目录有三个文件,app.jsapp.json,以及app.wxss,下面来谈谈我对这三个文件的理解。

    1 . app.js

    app.js中包含一个App()函数,我把它理解为微信小程序真正意义上的入口,也就是说当启动一个小程序的时候,首先会执行到这里。App()函数用来注册一个小程序,参数为Object类型,可以在其中指定小程序的生命周期函数(理解还不是很透彻), 当然,也可以定义一个全局的数据和函数,
    我们可以在页面中调用全局的getApp()方法,获得小程序实例,从而来调用我们定义的全局数据和函数。

    2 . app.json

    app.json可以对小程序进行全局的配置,比如我们可以配置小程序有哪些页面、窗口表现形式、设置网络超时时间、设置多tab等。下面就是一个简单的配置:

    { 
    "pages": [ 
    "page/index/index", 
    "page/logs/index" 
    ], 
    "window": { 
    "navigationBarTitleText": "Demo" 
    }, 
    "tabBar": { 
    "list": [{ 
    "pagePath": "page/index/index", 
    "text": "首页" 
    },{
    "pagePath": "page/logs/logs",
     "text": "日志" 
    }]
     }, 
    "networkTimeout": { 
    "request": 10000, 
    "downloadFile": 10000 
    }, 
    "debug": true
    }

    3 .app.wxss

    app.wxss文件比较好理解了,它相当于一个全局的样式表,等同于前端中的css文件,任何页面都可以使用这个样式表,当然,如果某个页面重复定义了某个属性的表现形式的话,则会覆盖app.wxss文件中定义的。

    以上三个文件中,app.js和app.json是每个微信小程序必须要有的,app.wxss则根据需要来添加。

    在图一的文件结构中,还有三个文件夹目录:images,pages,utils,这种形式就类似我们开发中分包的做法(其实就是)-将具有类型性质的文件或者类分目录存放,这样便于维护项目。

    我们来关注下pages目录,这个目录存放了小程序的所有页面。

    这里我们定义了两个页面,index(首页)和logs(显示某种日志)。
    可以看到,在每个页面中,也有类似前边儿我们所说的app.jsapp.json等文件,下面我们就来看看它们具体是什么。
    以logs页面为例:

    1 .logs.js

    我们看一下这个文件中简单的代码:

    //logs.js
    var util = require('../../utils/util.js')
    Page({
     data: {
     logs: []
     },
     onLoad: function () {
     this.setData({
     logs: (wx.getStorageSync('logs') || []).map(function (log) {
     return util.formatTime(new Date(log))
     })
     })
     }
    })

    如果你有过开发经验或者是js开发经验,那么一样就可以看出,这个类的结构很简单:1.引入了一个外部文件,2.有一个函数,进行了某种处理。

    我们看一下官方文档是怎么介绍这个以js结尾的文件的:包含一个Page()函数,Page()函数用来注册一个页面。接受一个object参数,其指定页面的初始数据、生命周期函数、事件处理函数等。它是页面的逻辑文件,页面逻辑在这里处理。

    在这个文件中,我们可以定义变量,函数等。

    2 .logs.json

    app.json是小程序的全部配置文件,那么不难理解,logs.json则是logs页面的配置文件,在这里我们可以配置页面标题等属性。

    3 .logs.wxml

    wxml文件是页面独有的,它相当于界面,它是与用户交互的入口,微信提供了很多基础组件,例如按钮,文本以及进度条等,都可以在这个文件中配置并显示出具体的效果。

    4 .logs.wxss

    wxss跟app.wxss文件一样,都是样式表文件,不过每个页面下的这个文件时对于某个页面的,而app.wxss则是全局的样式配置,相同属性的话,logs.wxss会覆盖掉app.wxss中的。

    对于页面下的文件配置,我们来看一下官方的说明:


    总结

    以上就是微信小程序的整体项目文件结构,由宏观到具体,弄清整体框架后,再一步一步学习其中的细节,可能会更加轻松。想学习更多关于微信小程序的文章请继续关注脚本之家。

    您可能感兴趣的文章:
    • 微信小程序 (十七)input 组件详细介绍
    • 微信小程序 开发指南详解
    • 微信小程序 (一)新建项目hello WeApp 详细介绍
    • 微信小程序(十)swiper组件详细介绍
    • 微信小程序(十三)progress组件详细介绍
    • 微信小程序 navigator 组件实例详解
    • 微信小程序 audio 组件实例详解
    • 微信小程序 canvas API详解及实例代码
    • 微信小程序 WXML、WXSS 和JS介绍及详解
    • 微信小程序 条件渲染详解
    上一篇:Git里多种撤销操作的最佳方法
    下一篇:微信小程序版的知乎日报开发实例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    微信小程序学习之初探小程序 微信,小,程序,学,习之,初探,