微信小程序学习（一）

最新推荐文章于 2022-08-14 20:49:20 发布

迷途执晓

最新推荐文章于 2022-08-14 20:49:20 发布

阅读量693

点赞数 1

分类专栏：微信小程序学习文章标签：微信小程序学习前端

本文链接：https://blog.csdn.net/F2691898750/article/details/125953762

版权

微信小程序学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

小程序概念：

小程序是近几年兴起的一种便捷而类似应用的简易功能，其优点有四：

1、体积小，无需下载，点击即用

2、开启与加载速度快

3、学习成本低，前景乐观，具有就业市场（仅需HTML+CSS+javascript基础即可）

4、开发资金少，成本低，适用于中小公司

但优点也必然伴随着缺点，其缺点有三：

1、源码包不能超过2MB，哪怕适用了分包技术，也同样无法超过20MB（限制了很多复杂的功能与画面表现）

2、无法随时随地上线，需要平台审核，时间大概为1—7个工作日（需要更多的时间成本）

3、暂时无法分享朋友圈（个人开发者访问量与成就感受到限制）

4、个人账号限制比较大，很多功能无法使用（需要组织成本）

小程序工程目录结构

进入编辑器后，其文件结构大致分为几种

1、js文件【逻辑文件，其中存放主要逻辑】

2、json文件【配置文件，对项目及其页面进行配置】

3、wxml文件【微信缩写+html文件，项目渲染模板】

4、wxss文件【微信缩写+css文件，项目样式】

特殊文件：

1、sitemap.json

网站地图，用于微信爬虫的索引，与流量访问量相关，这地方一般由专门的SEO人员来负责

2、project.config.json

项目整体全局配置文件，对项目整体进行配置（与app.json不同，一般衔接系统，配置项是项目保存位置、编译类型等）

3、project.private.config.json

项目私有配置文件，其中的配置优先于project.config.json

注：由于编辑器版本不同，生成特殊文件可能不同，仅做了解即可，具体请进入微信小程序官方文档了解详情：

微信小程序官方文档 | 点击即可进入

创建页面

有两种方法进行创建

一：

1、在编辑器中创建新文件（例：index）

2、鼠标右击，选择新建page，自动生成四个文件（js、json、wxss、wxml）

二：

1、在app.json中直接进行代码写入即可，代码如下：

{
"pages": [
  "pages/文件夹名/文件(不加后缀名)"
 ]


例:
"pages": [
  "pages/index/index"
 ]
}

编辑器会自动检测到以后进行文件生成

关于json文件要注意的点：

1、页面文件路径不能以.或/开头

2、在未配置entryPagePath属性的情况下，数组的第一项是小程序的默认启动项

3、所有的json文件都不能加注释

4、每个配置项直接都需要用逗号隔开，最后一项末尾不能加逗号

entryPagePath属性是用于配置小程序默认启动项的，配置方式:

{
entryPagePath:"路径",

"pages": [
  "pages/文件夹名/文件(不加后缀名)"
 ]
}

各项配置

注意，以下配置的都是在app.json文件中进行配置

window配置

window配置用于小程序的整体画面配置，例如是否下拉刷新，顶部栏颜色文字等，下面写几个常用的：

 "window": {
  "navigationBarTitleText": "第一个小程序", 导航栏标题文字 超过一定宽度会显示省略号
  "navigationBarBackgroundColor": "#00f", 导航栏的背景色 仅支持16进制颜色值
  "navigationBarTextStyle": "black", 导航栏的标题样式  仅支持两种black和white
  "backgroundColor": "#f00", 下拉刷新区域的颜色
  "enablePullDownRefresh": true,  开启全局的下拉刷新
  "backgroundTextStyle":"light",  设置下拉loading的样式
  "navigationStyle": "custom" 是否自定义导航栏 default-显示默认导航栏/custom不显示导航栏
 },

tabBar配置：

tabBar配置一般用于切换栏的样式或者是否显示的配置，列出以下常用配置：

"tabBar": {
  "color":"#00f", 设置tab上的字体颜色
  "selectedColor": "#f00",选中tab时的字体颜色
  "backgroundColor": "#fff",tabbar区域的背景色
  "borderStyle": "white",tabbar上方变量的边框颜色  white和black
  "position": "top", tabbar区域的显示位置  top和bottom  默认值是bottom
  "custom": true, 是否自定义导航栏
}

关于tabBar的切换配置：

使用list属性进行配置，需要注意的是，至少要配置两项可切换项（少于两项也谈不上切换），考虑到小程序在手机上使用，手机屏幕宽度无法承载太多切换图标的情况，因此官方设定最多配置六项:

"tabBar":{
此为四项，其实都是重复
"list": [{
    "pagePath": "pages/index/index",页面文件路径
    "text": "首页",  tab上的文字
    "iconPath": "./imgs/tabs/index.png", tab上的图标
    "selectedIconPath": "./imgs/tabs/indexFull.png" 选中时tab上的图标
   },
   {
    "pagePath": "pages/classify/classify",
    "text": "分类",
    "iconPath": "./imgs/tabs/star.png",
    "selectedIconPath": "./imgs/tabs/starFull.png"
   },
   {
    "pagePath": "pages/cart/cart",
    "text": "购物车",
    "iconPath": "./imgs/tabs/cart.png",
    "selectedIconPath": "./imgs/tabs/cartFull.png"
   },
   {
    "pagePath": "pages/mine/mine",
    "text": "我的",
    "iconPath": "./imgs/tabs/my.png",
    "selectedIconPath": "./imgs/tabs/myFull.png"
   }
  ]
}

关于切换图标（iconpath属性）：

1、其引入时只能使用本地图标，无法使用网图，同时官方建议图标大小为81*81，不是这个尺寸也会调到这个属性；单个图标大小建议不超过40kb，以免渲染时间过长

2、当tabBar的position属性配置为“top”时，图标不显示

在页面中也可以使用上方的绝大多数配置，在页面名.json中配置

场景值

场景值的出现是因为用户通过不同方式进入需要呈现不同页面的需求存在，因而出现的属性，开发者可以通过场景值的不同来进行不同的页面渲染或页面跳转

场景值的获取有两种方式：

一、使用生命周期函数的事件对象：

App({
	//小程序初始化成功后加载的生命周期 只能触发一次
	/在onLaunch中获取
	onLaunch(e) {
			console.log("onLaunch");
			console.log(e)
			if(e.scene=="1005"){
				console.log("跳转主页面")
			}else if(e.scene=="1011"){
				console.log("跳转活动页面")
			}
	},


	//小程序初始加载成功或者切换前台显示
	// 在onShow中获取场景值
	onShow(e) {
		console.log("onShow")
		console.log(e)

	}
})

二、使用api方法：

App({
	onShow(e) {
		//api方法 
		let info =  wx.getLaunchOptionsSync() //该api方法返回结果和onLaunch中的e一致
		console.log(info.scene)
	}
})

小程序的全局生命周期

小程序的生命周期分为全局与页面，它们的环境都是类，全局的引入名叫做App，页面的叫做Page，它们都是提前封装引入,可以直接使用，在其中进行逻辑代码写入

使用官方封装好的不同的函数进行功能实现，这里只说全局的生命周期函数，也就是在app.js中进行：

App({
	//1-小程序的生命周期
	//小程序初始化成功所触发的生命周期  只会触发一次
	onLaunch() {
		console.log("小程序的onLaunch");
	},
	//小程序首次初始化成功或者切换前台页面的时候会触发
	onShow() {
		console.log("小程序的onShow")

	},
	//切换后台的时候会触发
	onHide() {
		console.log("小程序的onHide")
	},

	//监听全局的错误脚本或者api
	onError(error) {
		console.log(error)
	},
	//当页面找不到的时候会触发
	onPageNotFound() {
		//404页面  或者是强制跳转首页
		console.log("页面不存在")
	},



})

全局变量和方法

在app.js中进行定义的方法与属性当然可以在其本身使用，因为在app.js中定义，它们被称为全局属性，当然可以在项目中的其他页面中使用

在本身使用：

在app.js中直接定义使用
	//1-全局变量
	userInfo: {
		name: "橘右京",
	},

	//2-全局方法
	skill:function(){
			return "割草"
	},
 在app.js中通过this获取

console.log(this.userInfo.name)

在项目其它页面中使用

    在其他页面的逻辑文件中  通过getApp获取
 	//访问全局变量和方法 
    //获取全局唯一的app实例  getApp

    let app =  getApp();
    //获取全局属性
    console.log(app.userInfo.name)
    //获取全局方法
    console.log(app.skill())

此笔记作为我的网上笔记记录，

如有错误，请提出告知于我，非常感谢

以上