这是一款来自小程序免费开发制作网的小程序demo源码，希望大家喜欢。一：开发之环境搭建 摘要: 微信
小程序开发环境主要利用官方提供的开发包

1、下载官方提供的开发者工具，它集成了开发调试、代码编辑及程序发布等功能。当前为（0.10.101100）

      下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476434678461

2、安装并且运行开发工具，第一次启动如下图：

(此图片来源于网络，如有侵权，请联系删除! )

3、点击添加项目：

(此图片来源于网络，如有侵权，请联系删除! )

4、由于暂时没有内测帐号，所有没有appID（与订阅号和服务号appID不一样），输入项目名称helloWorld,

选择目录为上面下载的官方demo

(此图片来源于网络，如有侵权，请联系删除! )

5、单击添加项目，项目创建成功，看到如下页面表示项目配置成功。

(此图片来源于网络，如有侵权，请联系删除! )

环境配置还是很简单的，按照步骤来做应该不会出现问题。

二：目录结构分析

学习一个框架，首先应该了解一下他的目录结构，小程序的目录接口如下图：

(此图片来源于网络，如有侵权，请联系删除! )

从demo中可以看到主要分为两部分

1、系统文件或者公用文件

2、页面文件（page文件夹）

下面分别来学习每个文件的具体用法及作用

app.js

小程序启动先回执行此文件中的方法，此文件为空，程序也可以正常执行，但通常不会这么做，一般用于执行App方法返回app对象。

App({
  onLaunch: function () {
    console.log('onLaunch')
  },
  onShow: function () {
    console.log('onShow')
  },
  onHide: function () {
    console.log('onHide')
  },
  other:function(){
      
  }
})

代码中的几个方法，非常类似原生app开发中的生存周期函数，详细解释如下：

当程序启动时，首先会执行onLauch函数，启动成功后会执行onShow,当程序退出活动窗口，会执行onHide函数，程序再次切换到活动窗口会执行onShow。

(此图片来源于网络，如有侵权，请联系删除! )

注意：

App() 必须在 app.js 中注册，且不能注册多个。

不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。

不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成。

通过 getApp() 获取实例之后，不要私自调用生命周期函数。

app.json

我们使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等，简单的理解就是配置文件了。

配置项表：

pages属性

pages属性的第一个值为系统启动页面，如下图配置项，那么小程序启动后，会先运行 logs页面

{
  "pages":[
    "pages/logs/logs",
    "pages/index/index"
  ]
}

window属性

windows属性用于设置小程序的状态栏、导航条、标题、窗口背景色。

tabBar

如果我们的小程序是一个多 tab 应用（客户端窗口的底部有tab栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

networkTimeout

可以设置各种网络请求的超时时间。

debug

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

本资源来自易用通，如有侵权，请联系站长。