微信小程序入门（一）微信小程序入门（一）

一。环境搭建
微信公众平台小程序注册地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN
注册时主体类型选择：个体
微信官方开发工具的下载：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
注册成功之后获取appid，小程序的appid相当于小程序平台的一个身份证，很多地方需要用到appid，比如在创建小程序项目时候就需要用到appid。
获取方法：设置--开发设置--小程序id右边的那一串
二。创建第一个项目
点开下载安装好的微信开发工具→第一步会出现项目（要先创建一个空的app文件夹路径随便），然后项目目录就是该文件夹→Appid就填写在设置中获取到的→项目名称任意名字→然后就可以进入开发页面了
.在页面中开发模式选择小程序开发，新建一个编译模式1，进入场景默认

文章图片
1.png
三。分析小程序文件的基本结构

- pages // 包含了所有页面 - index // 页面文件夹 - index.js// 页面的脚本逻辑文件 - index.wxml// 页面模板文件 - index.wxss// 页面样式文件 - index.json// 页面配置文件 - utils // 普通的工具函数 - app.js// 项目启动入口 - app.json // 全局的配置 - app.wxss // 全局样式 - project.config.json // 项目的配置文件

注意点：wxml就是等于web中的html，wxss是样式
四。项目的json文件配置
详细配置文档说明地址：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
pages配置（记得参考微信官方文档）
pages数组中的页面路径地址必须存在pages文件夹中
pages数组中的页面路径地址下标为0，也就是第一个路径在普通编译模式下会作为启动页面，但不建议使用更换顺序的方式修改启动页，可以通过新增或修改编译模式更改启动页
window配置示例

// app.json { "window":{ "navigationBarBackgroundColor": "#fff", // 导航栏背景颜色 "navigationBarTextStyle": "black",// 导航栏标题颜色，仅支持 black / white "navigationBarTitleText": "weChart",// 导航栏标题文字内容 "backgroundColor": "#fff",// 窗口的背景色 "backgroundTextStyle": "light"，// 下拉 loading 的样式，仅支持 dark / light "enablePullDownRefresh": true// 设置允许下拉刷新 } }

注意： window的配置

navigationBarTextStyle导航栏标题颜色，仅支持 black / white
backgroundTextStyle下拉 loading 的样式，仅支持 dark / light

tabBar配置示例

// app.json { "tabBar": { "color": "#000",// tab 上的文字默认颜色 "selectedColor": "#000",// tab 上的文字选中时的颜色 "backgroundColor": "#f5f5f5",// tab 的背景色 "list": [{ "pagePath": "pages/index/index",// 页面路径，必须在 pages 中先定义（必填） "text": "首页",// tab 上按钮文字（必填） "iconPath": "",// tab 上的图片路径,不支持网络图片 "selectedIconPath": ""// 选中时的图片路径 }, { "pagePath": "pages/logs/logs", "text": "日志", "iconPath": "", "selectedIconPath": "" }] } }

注意：配置了tabBar后，底部栏只对配置的页面可见, 而且tabBar的设置至少两个，最多5个页面配置
页面配置文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。
页面的配置只能设置 app.json 中部分 window 配置项的内容**，页面中配置项会覆盖 app.json 的 window 中相同的配置项。 wxml和html的不同点
标签名字不一样，如html里常用的标签 div、a、span等，在小程序里标签是view、navigator、text等，除了常用的元素块标签，小程序还提供了地图，视频，音频等组件
view容器组件

text文本组件

文本内容

navigator的基本使用

// url的连接前面必须加上斜杆 “/” 跳转到demo

注意点：navigator不支持跳转到外部的url，例如url="https://www.baidu.com" 跳转到tabBar的页面
设置open-type值为switchTab，比如index页面是tabBar的页面，可以这样来设置
【微信小程序入门（一）】跳转到tabBar的使用方法

跳转到首页

open-type 常用的有效值

redirect 覆盖当前页面
switchTab 跳转到tabBar页
navigateBack 关闭当前页面，返回上一页面, 不需要制定url的值，相当于的web的history.back()

image图片组件

注意点：image组件默认宽度300px、高度240px 注2：image组件中二维码/小程序码图片不支持长按识别
常用的mode 有效值
scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来
aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来
其他组件跟html标签差不多，具体参考微信官方文档使用即可
wxss样式
rpx 尺寸单位
什么是rpx？
rpx可以使元素根据屏幕宽度进行自适应，小程序规定屏幕的宽度为750rpx，也就是 100% = 750rpx; 50% = (750 / 2)rpx
其他自适应方法
web中使用rem，vw, vh, 百分比
使用方法
在开发小程序是建议使用750像素宽度的设计稿，这样设计稿的元素宽度是多少像素就直接设置为多少rpx