微信小程序学习总结(上)

环境搭建

微信公众平台地址：https://mp.weixin.qq.com/wxopen/initprofile?action=home&lang=zh_CN
开发工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

1. 账号注册，推荐使用新注册的邮箱，可以是163邮箱、新浪邮箱、qq邮箱等等
2. 个人开发者，注册时第三选择账号主体要选择个人
3. 获取appid，登录微信公众平台，选择左侧栏的设置，在右侧内容页切换到开发设置
4. 创建项目时需要输入上一步获取的appid

小程序基本文件结构

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

项目的json文件配置详细文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

全局配置 app.json

app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等

{
	// pages数组中的页面路径地址必须存在pages文件夹中
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
    // 注意： window的配置
   // 1. navigationBarTextStyle导航栏标题颜色，仅支持 black / white
   // 2. backgroundTextStyle下拉 loading 的样式，仅支持 dark / light
  "window":{
    "navigationBarBackgroundColor": "#fff", // 导航栏背景颜色 
    "navigationBarTextStyle": "black",      // 导航栏标题颜色，仅支持 black / white
    "navigationBarTitleText": "weChart",    // 导航栏标题文字内容
    "backgroundColor": "#fff",				// 窗口的背景色
    "backgroundTextStyle": "light"，			// 下拉 loading 的样式，仅支持 dark / light
    "enablePullDownRefresh": true			// 设置允许下拉刷新
  },

	// tabBar配置示例 
  "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": ""		
    }]
  }
}

组件

组件具体地址： https://developers.weixin.qq.com/miniprogram/dev/component/
组件属性

view容器组件&text文本组件

<view class="container">
	<!-- 页面内容 -->
	<!-- text组件 -->
	<text>文本内容</text>
</view>

navigator页面（跳转）链接组件

// url的连接前面必须加上斜杆 “/”
<navigator url="/pages/demo/domo">
	跳转到demo
</navigator>

// navigator不支持跳转到外部的url，例如url="https://www.baidu.com"

跳转到tabBar的页面

• 设置open-type值为switchTab，比如index页面是tabBar的页面

<navigator url="/pages/index/index" open-type="switchTab">
	跳转到首页
</navigator>

// open-type 常用的有效值
// 1.redirect 	覆盖当前页面
// 2.switchTab	  跳转到tabBar页
// 3.navigateBack  关闭当前页面，返回上一页面, 不需要制定url的值，相当于的web的history.back()

image图片组件

<image 
	style="width: 200px; height: 200px;
	mode="aspectFill" 
	src="图片地址">
</image>
// image组件默认宽度300px、高度240px 注2：image组件中二维码/小程序码图片不支持长按识别

• 常用的mode 有效值
  scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
  aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来
  aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来

form表单组件

form表单组件包含了以下常用的子组件(下面表单的子组件除了button都有name属性，给表单提供字段名的映射)
input 输入框组件
label 表单字段说明组件
checkbox 多项选择器组件
radio 单项选择器组件
button 按钮组件

input输入框组件

<input placeholder="请输入文字" type="text"/>

button 按钮组件

form表单基本提交案例

// wxml
// 第二步，通过bindsubmit设置form的提交事件处理函数 
<form bindsubmit="formSubmit">
	<input type="text" name="username" placeholder></input>
	//第一步，设置button form-type='submit 
	<button form-type="submit">提交</button>
</form>
// js
formSubmit: function(e){
    console.log(e.detail.value)
  }

wxss样式

使用rpx 尺寸单位
rpx可以使元素根据屏幕宽度进行自适应，小程序规定屏幕的宽度为750rpx， 也就是 100% = 750rpx; 50% = (750 / 2)rpx（1rpx在某些屏幕上可能无效）