【微信小程序】入门教程

一、准备工作

开发环境的准备

1.开发工具

到微信官方文档下载：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.微信小程序注册

• 邮箱：一个邮箱注册一个小程序
• 小程序主体：
  个人：绑定身份证的微信号（管理员）
  企业：营业执照、法人身份证、相关行业许可证、其他资质证照
• 获取appId和密钥
  非常重要，自行保存，不能泄露

3.小程序设计

	设计图
	清楚小程序的目的、应用场景

二、app.json

	pages
		程序启动时会加载这里配置的页面，不加会报错或者无法加载页面，放在第一个就是首页
		在这里配置后，直接启动，如果配置的页面不存在，会自动创建
	tabBar
		此处配置小程序底部菜单栏，2-6个，不配置则无菜单栏
		pagePath
			页面路径
		text
			菜单栏显示的文字
		iconPath
			未选中时显示的图标
		selectedIconPath
			选中时显示的图标

三、app.js

	一些公共方法
		比如获取用户信息
			昵称
			头像
			定位
			手机号
	onLaunch: function ()
		进入小程序时执行的方法
		一般在此处做登陆校验、用户信息查询等操作

四、src

	相关资源文件放在该文件夹
		图片
		视频
		音频
		支付密钥
		域名证书等

五、utils

	工具包
		加密工具
		日期工具
		等

六、业务代码

	按模块分解、命名
	每个业务模块单独一个文件夹
		*.js
			业务逻辑、计算
				JavaScript编程语言
				onLoad()
					进入该页面时立即执行的方法
					一般在此处做页面展示数据的查询
					数据初始化
				常用微信官方API
					wx.getStorageSync('XX')
						从小程序缓存中获取参数
					wx.setStorageSync('XX','XXX')
						小程序缓存中加入参数
					 wx.login
						登陆接口
							获取openid或者code
					 wx.showToast
						弹框提示
					 wx.request
						发送请求
							一般是调用后端服务的接口，通过http协议传输
					wx.navigateTo
						跳转到其他页面
		*.json
			配置文件
				navigationBarTitleText
					页面顶部显示的标题、文字
				引入其他框架或模块
		*.wxml
			对应html
				页面
					<view>
						通用标签，对应<div>
					<imge>
						图片
					<input>
						输入框
					<text>
						长文本
					{{name}}
						在js中设置的字段，用双大括号引入到页面上展示
					<progress>
						进度条
					<map>
						地图
					wx:for="{{convictList}}" wx:key="index"
						列表数据动态展示
		*.wxss
			对应css
				样式
					调整页面上各个元素的样式
					定位
						position: relative;
							绝对定位
						position: absolute;
							相对定位
					对齐
						align-items: center;
							垂直居中
						justify-content: center;
							水平居中
						display: flex;
							并排，不换行
					大小
						宽度
							width
						高度
							height
					偏移
						左
							left
						右
							right
						上
							top
					其他用到时百度即可，直接搜css样式
					使用 rpx 或者百分比，用px有机型适配问题

更多介绍，参考微信开发文档
https://developers.weixin.qq.com/miniprogram/dev/component/