微信小程序01

最新推荐文章于 2024-09-28 23:31:56 发布

李白要喝酒

最新推荐文章于 2024-09-28 23:31:56 发布

阅读量715

点赞数 17

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/m0_64920987/article/details/140077131

版权

一、微信开发简介

1.微信开发概述

概述

（1）微信开发即微信公众平台开发，将企业信息、服务、活动等内容通过微信网页的方式进行表现，用户通过简单的设置，就能生成微信网站。（2）通俗的说，就是微信对外提供了例如聊天、支付、分享、收藏等功能，同时还提供了丰富的封装好的接口，开发者利用这些接口和功能，写入程序中，进行的开发。

目的

（1）企业开发的需要,使自己更加符合企业发展的需求（2）个人的发展以及技能的提升（3）发展前景大、生态系统丰富

平台

（1）微信开放平台（2）微信公众平台

2.微信公众平台

微信公众平台

2.1微信公众平台概述

微信公众平台简称公众号，微信公众平台开发者通过公众号为微信用户提供服务和咨询的一种平台

==2.2账号分类==

订阅号
服务号
小程序（小游戏）
企业号（企业微信）

二、认识小程序

1.小程序概述

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

2.应用场景

不适合大型项目
适合中小型项目

类似APP应用

==3.亮点与不足==

优点：
    1-是一种不用下载安装即可使用的应用；
    2-针对中小型企业来说，节省了开发时间和成本；
    3-打开速度和加载速度相对较快；
    4-学习成本低（html、css、js）
不足：
    1-小程序源码只有2M，使用分包技术可以达到20M；
    2-不能随时随地上线，需要微信官方进行审核，审核周期一般为1-7个工作日，每年有一次加急机会；
    3-对个人开发者限制大，很多功能不能使用；（微信支付）
    4-暂时不能分享到朋友圈（测试版本的安卓可以  上线以后安卓暂时不支持，ios测试和上线都不行）

三、注册小程序账号

1.小程序账号注册流程

1-点击官网上的立即注册按钮
2-选择账号类型为小程序
3-填写邮箱地址 密码  确认密码 验证码 勾选协议  点击注册
4-此时会给你的邮箱发送一个验证链接，你需要点击链接进行验证
5-选择主体类型为个人
6-完善管理员信息，需要填写姓名 身份证  手机号  验证码  扫描二维码绑定管理员微信即可

2.小程序信息完善

小程序名称
小程序简称
小程序头像
小程序介绍
服务类目(一定不能选择小游戏)

3.微信后台介绍

appid：微信后台-开发-开发管理-开发设置

四、微信开发者工具及工程创建

首先小程序开发不同于普通的网页开发，项目不能运行在浏览器中，所以无法查看编程效果以及调试，微信开发者工具提供了代码的编程能力，调试能力以及展示运行效果能力等强大的功能

1.工具下载安装

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

2.工程创建

1-先用管理员微信扫码登录微信开发者工具
2-左侧选择小程序
3-在右侧点击+ 选择创建小程序
4-填写小程序目录，填写自己的appid 开发模式选择小程序 后端服务选择不使用云服务 选择不使用模板 点击创建即可

3.工具常用功能使用

五、工程目录

1.小程序目录结构

主要目录文件
	app.js  入口文件（主业务逻辑）
	app.json  小程序全局配置（配置tabber、窗口、页面路径列表、小程序默认启动项等等）
	app.wxss  全局CSS样式
	
	pages 目录
		index 目录 文件路径目录
			index.wxml  页面结构（相当于html页面）
			index.wxss  页面样式（相当于css文件）
			index.js   当前页面的业务逻辑文件（js文件）
			index.json  当前页面配置（优先级要比app.json高）
			
	project.config.json  开发者工具对当前项目的配置
	sitemap.json  站点地图

六、小程序配置

1.配置概述

对项目和页面的一些设置：app.json 和 pages下的对应目录路径下的json文件

2.全局配置app.json

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，有以下属性：

2.1 pages

用于指定小程序由哪些页面组成，每一项都对应一个页面的路径（含文件名）信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。

第一种创建目录的方式：

在pages目录上点击右键创建文件夹（list）
在list文件夹中创建四个文件：.json`, `.js`, `.wxml`, `.wxss`

"pages": [
    "pages/index/index",
    "pages/list/list"
  ]

第二种创建目录的方式：

直接在app.json文件中pages中添加目录路径
"pages": [
    "pages/list/list",
    "pages/index/index",
    "pages/mine/mine"
  ]

==注意：==

所有的json文件中都不能添加注释
路径不能以.或/开头
每个路径直接用逗号隔开，最后一项后面不要加逗号

2.2 entryPagePath

指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数。

"entryPagePath": "pages/mine/mine",

2.3 window

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

"window": {
    "backgroundTextStyle": "dark",   // 下拉 loading 的样式，仅支持 dark / light
    "navigationBarBackgroundColor": "#f00", // 设置导航栏背景颜色，十六进制
    "navigationBarTitleText": "小程序",  // 设置导航栏标题内容
    "navigationBarTextStyle": "white",  // 设置导航栏文字颜色，仅支持black/white
    "enablePullDownRefresh":true,  // 是否开启全局下拉刷新功能（布尔值）
    "backgroundColor": "#ff00ff"  // 窗口的背景颜色（出现loading样式的时候的背景色）
  }

2.4 tabbar

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

"tabBar": {
    "color": "#00ff00",   // tab 默认文字颜色
    "selectedColor": "#ff0000",  // tab 选中的文字颜色
    "backgroundColor": "#ffff00",  // tab的背景色
    "borderStyle": "black",  // tab的边框颜色，仅支持black/white
    "position": "bottom",  // 设置tab的位置，仅支持bottom和top，当值为top的时候，icon图标不显示
    "list": [{
      "pagePath": "pages/index/index", // tab 项路径
      "text": "首页",  // tab 项显示文字
      "iconPath": "img/index.png",  // tab 项显示图标
      "selectedIconPath": "img/indexFull.png"  // tab 项被选中时的图标
    },{
      "pagePath": "pages/cart/cart",
      "text": "购物车",
      "iconPath": "img/cart.png",
      "selectedIconPath": "img/cartFull.png"
    },{
      "pagePath": "pages/classify/classify",
      "text": "列表",
      "iconPath": "img/star.png",
      "selectedIconPath": "img/starFull.png"
    },{
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "img/my.png",
      "selectedIconPath": "img/myFull.png"
    }]
  }

==注意==

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。
icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。

3.页面配置page.json

app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 .json 文件来对本页面的表现进行配置。

页面中配置项在当前页面会覆盖 app.json 中相同的配置项（样式相关的配置项属于 app.json 中的 window 属性，但这里不需要额外指定 window 字段）

{
    "navigationBarTitleText": "购物车",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true,
    "navigationBarBackgroundColor": "#0000ff",
    "backgroundColor": "#00ff00"
}

七、场景值

1.场景值概述

场景值用来描述用户进入小程序的路径。

2.使用场景

KFC
	搜索小程序
		默认进入的是店面的首页
	扫码二维码
		进入到活动页面

==添加编译模式==
添加编译模式--模式名称--启动页面---选择进入的场景值--确定---编译

==工具==
工具--工具管理---切后台

3.获取场景值

App({

	// 第一种获取场景值的方法
	// 小程序的声明周期函数---小程序初始化
	onLaunch(e){
		console.log(e);
	},
	onShow(e){
		console.log(e,'show');
		// 第二种获取场景值的方法
		let info = wx.getLaunchOptionsSync();
		console.log(info.scene);

	}
})

八、小程序逻辑层

1.逻辑层概述

增加 App 和 Page 方法，进行程序注册和页面注册。
增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
提供模块化能力，每个页面有独立的作用域。

注意：小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window，document 等。

2.小程序注册App()

注册小程序

注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

// 相当于new Vue实例，在里面就可以直接使用this
// App 注册了一个小程序实例，在里面可以直接使用wx；
App({
    
})

小程序的生命周期

onLaunch(){  // 小程序初始化
    console.log('onLaunch');
},
onShow(){ // 监听小程序启动或切前台。
    console.log('onShow');
},
onHide(){  // 监听小程序切后台。
    console.log('onHide');
},
onError(){  // 错误监听函数。
    console.log('onError');
},
onPageNotFound(){  // 页面不存在监听函数。
    console.log('onPageNotFound');
}

全局变量和方法

// 定义全局变量和方法（app.js中的APP()中）
// 定义全局变量
userinfo:{
    name:'张三',
    age:18,
    sex:'男'
},
// 定义全局方法
fun(){
    console.log('全局方法');
}

// 在app.js中调用，一般是onLaunch或onShow声明周期函数中
onShow(){ // 监听小程序启动或切前台。
    console.log('onShow');
    console.log(this.userinfo);
    this.fun();
}

// 在pages下的目录路径的js中使用全局变量和方法
let app = getApp();
console.log(app.userinfo.name);

==注意事项==