更多优质内容
请关注公众号

微信小程序入门(一) 文件和目录结构-张柏沛IT博客

正文内容

微信小程序入门(一) 文件和目录结构

栏目:Web前端 系列:微信小程序入门系列 发布时间:2019-12-26 21:21 浏览量:1988

本文开始一步步教大家如何利用微信开发工具编写小程序,该节介绍微信小程序源码的文件和目录结构


1.开发前准备
首先要安装小程序开发工具,不然你连代码都敲不了
百度搜索微信小程序开发工具即可。

然后到微信公众平台注册登录
https://mp.weixin.qq.com/

在开发工具开启新项目,他会自动生成一个目录。
初始化之后的目录结构如下

pages/
utils/
app.js
app.json
app.wxss
project.config.json
sitemap.json


app.js

程序主体
在这里面要写逻辑的代码,用于初始化,初始化的代码可以写在这里


app.json
程序配置文件

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}


pages

是放页面的目录,记录着小程序有哪些页面,"pages/index/index"就代表index页面。

pages下会有很多目录,pages下一个目录代表一个页面。例如pages下有一个index目录,这就代表index页面。index目录下有4个文件,这4个文件组成一个页面
index.js
index.json  该页面的配置
index.wxss  该页面的样式
index.wxml  页面结构即html
第一和第四个文件是必须的


app.wxss
样式文件,在这里设置样式,所有页面都会有这个样式

project.config.json

这个文件我们不需要改东西,不管他就行


2.程序和页面配置
这节我们看 app.json 的一些参数

程序配置(app.json)
pages : 页面路径
window :页面的窗口表现
tabBar : 底部tab切换
networkTimeout
debug


pages:
怎样设定主页,只要把页面路径放在pages参数下的第一条,他就会变成首页。

window:
然后window参数,这个参数下的配置可以在微信小程序文档中查:

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

比如:

{
    "window":{
	    #开启下拉刷新
    	"enablePullDownRefresh":true,
	
	    #设置顶部颜色
    	"navigationBarBackgroundColor":"#28B2E6"
    }
}



这些只要查文档就好

networkTimeout:
设置网络请求的超时事件,默认60秒。

debug:
调试工具,会显示一些调试信息

"debug":true 即可

tabBar:
就是底部的切换栏

"tabBar":{
	#表示底部栏有几个栏目,最多5个最少2个
	'list':[
		{
			#pagePath和text是必不可少的
			"text":"首页",
			"pagePath":"pages/index/index",
			
			#设置每个栏目的图标
			'iconPath':"common/img/1.png"
			
			#选中时图标,不设置则选中该栏目是看不到图标的
			"selectedIconPath":"xxx"
		},
		{
			"text":"视频页",
			"pagePath":"pages/index/moviw"
		},
		{
			"text":"图片页",
			"pagePath":"pages/index/pic"
		}
	],
	
	#默认字体颜色
	'color':"#707070",
	
	#选中也的颜色
	"selectedColor":"blue"
	
	
}



页面配置:
window 页面的窗口配置


3.注册程序和页面
要运行小程序,就要注册程序
要运行一个页面,就要注册页面

注册程序在app.js
如下所示:
App({...}) 就是注册程序

注册页面就是在每个页面的js文件调用Page({...})

在app.js调用App({})后会返回一个app实例,在app实例中定义的变量可以在所有页面的js中访问。比如

App({
    gldData:{  //这个可以随便取
        a:1
    }
});

在index.js中:
const app = getApp();
console.log(app.gldData); //可以打印出{a:1}
这段代码可以写在Page({})外也可以在PAge({})内

在页面中
Page({})会返回页面实例,在页面实例中定义的变量只能在该页面实例中使用。

定义变量不能向平时写js一样用
var a=1
的方式去定义
而是必须写成json的形式去定义:
Page({
    a:1
});

在注册程序App({})的时候,onLaunch事件会被触发
在注册页面Page({})时,onLoad事件会被触发。

例如:
Page({
    a:1,
    onLoad:function(){
        console.log(a);
    }
});

那么一进入这个页面就会打印1

4.程序的生命周期和页面的生命周期
程序APP的生命周期
onLaunch 程序启动时执行,每一次刷新都算启动一次小程序

onShow 小程序从后台切换回来之后执行

onHide 小程序后台运行时执行

你在电脑的小程序开发工具点击真机调试,然后会出现一个二维码,扫一扫,就可以再手机上运行你这个小程序

页面的声明周期
onLoad 
页面加载时执行,只会执行一次

onReady
在页面第一次渲染完之后执行,只执行1次

onShow
页面显示时执行, 可执行多次

onHide 
页面隐藏时执行, 可执行多次

onUnload
页面关闭时执行

细节:执行的顺序是onLoad,onShow,onReady 
如果从A页面跳转到B页面,而且是以tab(底部导航)形式切换时,A页面没有卸载,只是隐藏了起来而已,所以onUnload不会执行,onHide会执行,跳会A页面时不会执行onLoad只会执行onShow

但是如果是以navigatorTo的形式跳转,A页面也是被隐藏,不是卸载;B页面被加载。回退会去(navigatorBack),A页面会显示,但B页面就会被卸载而不是隐藏。
执行卸载时是不会执行隐藏的。




更多内容请关注微信公众号
zbpblog微信公众号

如果您需要转载,可以点击下方按钮可以进行复制粘贴;本站博客文章为原创,请转载时注明以下信息

张柏沛IT技术博客 > 微信小程序入门(一) 文件和目录结构

热门推荐
推荐新闻