全局配置

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

配置项

微信小程序配置项参考链接
支付宝小程序配置项参考链接
百度程序配置项参考链接
头条小程序配置项参考链接
QQ小程序配置项参考链接

页面配置

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

配置项

微信小程序配置项参考链接
支付宝小程序配置项参考链接
百度程序配置项参考链接
头条小程序配置项参考链接
QQ小程序配置项参考链接

购物车流程

API的使用

参考各自官方API文档：
微信小程序配置项参考链接
支付宝小程序配置项参考链接
百度程序配置项参考链接
头条小程序配置项参考链接
QQ小程序配置项参考链接

组件的使用

一、地图组件

点击查看官方文档

1. marker

标记点用于在地图上显示标记的位置

属性	说明	类型	必填	备注	最低版本
id	标记点 id	number	否	marker 点击事件回调会返回此 id。建议为每个 marker 设置上 number 类型 id，保证更新 marker 时有更好的性能。
latitude	纬度	number	是	浮点数，范围 -90 ~ 90
longitude	经度	number	是	浮点数，范围 -180 ~ 180
title	标注点名	string	否	点击时显示，callout存在时将被忽略
zIndex	显示层级	number	否		2.3.0
iconPath	显示的图标	string	是	项目目录下的图片路径，支持网络路径、本地路径、代码包路径（2.3.0）
rotate	旋转角度	number	否	顺时针旋转的角度，范围 0 ~ 360，默认为 0
alpha	标注的透明度	number	否	默认 1，无透明，范围 0 ~ 1
width	标注图标宽度	number/string	否	默认为图片实际宽度
height	标注图标高度	number/string	否	默认为图片实际高度
callout	自定义标记点上方的气泡窗口	Object	否	支持的属性见下表，可识别换行符。	1.2.0
label	为标记点旁边增加标签	Object	否	支持的属性见下表，可识别换行符。	1.2.0
anchor	经纬度在标注图标的锚点，默认底边中点	Object	否	{x, y}，x 表示横向(0-1)，y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点	1.2.0
aria-label	无障碍访问，（属性）元素的额外描述	string	否		2.5.0

2. marker 上的气泡 callout

属性	说明	类型	最低版本
content	文本	string	1.2.0
color	文本颜色	string	1.2.0
fontSize	文字大小	number	1.2.0
borderRadius	边框圆角	number	1.2.0
borderWidth	边框宽度	number	2.3.0
borderColor	边框颜色	string	2.3.0
bgColor	背景色	string	1.2.0
padding	文本边缘留白	number	1.2.0
display	'BYCLICK':点击显示; 'ALWAYS':常显	string	1.2.0
textAlign	文本对齐方式。有效值: left, right, center	string	1.6.0

3. control

在地图上显示控件，控件不随着地图移动。

属性	说明	类型	必填	备注
id	控件id	number	否	在控件点击事件回调会返回此id
position	控件在地图的位置	object	是	控件相对地图位置
iconPath	显示的图标	string	是	项目目录下的图片路径，支持本地路径、代码包路径
clickable	是否可点击	boolean	否	默认不可点击

二、小程序定位相关 api

点击查看官方文档

三、获取设备基本信息的 api

点击查看官方文档

• 同步

try {// 如果条件可以执行下去const res = wx.getSystemInfoSync()console.log(res)
} catch () {// 异常
}

• 异步

wx.getSystemInfo({success: res => {console.log(res)}
})

因为设备的信息可能在多个地方使用，所以建议使用全局变量

1. 设置全局的变量 app.js

globalData: {userInfo: null,deviceInfo：null
}

2. 获取设备信息 app.js

APP({onLaunch(){// 获取设备的信息this.getDeviceInfoFn()}getDeviceInfoFn(){wx.getSystemInfo({success: function(res) {console.log(res)},})}
})

3. 地图页面获取全局的设备信息

const app = getApp()
console.log(app.globalData)
// const { screenWidth, screenHeight } = app.globalData.deviceInfo
// const { globalData: { deviceInfo: { screenWidth, screenHeight } } } = app

三、处理小程序中的 HTML 标签

1.rich-text

使用UEditor

nodeJS部署ueditor富文本编辑器

2.wxParse

• 第一步下载wxParse
• 第二步 复制文件夹wxParse至项目跟目录下
• 第三步 详情页面引入必要的文件

// pages/detail/detail.js
var WxParse = require('../../wxParse/wxParse.js');// pages/detail/detail.wxss
@import "/wxParse/wxParse.wxss";

• 第四步 数据绑定

给wxparse赋值

/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
WxParse.wxParse('article', 'html', data, this, 5);

模版引用 pages/detail/detail.wxml

<import src="/wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

五、小程序中的模板语法

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

定义模板
使用 name 属性，作为模板的名字。然后在内定义代码片段，如：

<!--index: intmsg: stringtime: string
-->
<template name="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view>
</template>

使用模板
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如

wxml
<template is="msgItem" data="{{...item}}"/>
// js
Page({data: {item: {index: 0,msg: 'this is a template',time: '2016-09-15'}}
})

六、小程序常用api之拍照

1.预览图片

https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html

// pages/home/home.wxml<image lazy-load="{{true}}" mode="widthFix" show-menu-by-longpress="{{true}}" src="{{'http://daxun.kuboy.top' + item}}" data-index="index" bindtap="previewImage"></image>// pages/home/home.js
previewImage (event) {let arr = []; // 预留空数组let index = event.currentTarget.dataset.index // 获取当前点击的图片的索引this.data.bannerlist.map(item => { // 将处理的数据压入数组arr.push('http://daxun.kuboy.top' + item)})console.log(arr)wx.previewImage({ // 调用预览图片current: arr[index],urls: arr})}

2.拍照

https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

wx.chooseImage(Object object)

从本地相册选择图片或使用相机拍照

属性	类型	默认值	必填	说明
count	number	9	否	最多可以选择的图片张数
sizeType	Array.<string>	['original', 'compressed']	否	所选的图片的尺寸
sourceType	Array.<string>	['album', 'camera']	否	选择图片的来源
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.sizeType 的合法值

值	说明	最低版本
original	原图
compressed	压缩图

object.sourceType 的合法值

值	说明	最低版本
album	从相册选图
camera	使用相机

object.success 回调函

属性	类型	说明	最低版本
tempFilePaths	Array.<string>	图片的本地临时文件路径列表 (本地路径)
tempFiles	Array.<Object>	图片的本地临时文件列表	1.2.0

res.tempFiles 的结构

属性	类型	说明
path	string	本地临时文件路径 (本地路径)
size	number	本地临时文件大小，单位 B

<button bindtap="chooseImg">拍照</button>
<image wx:for="{{img}}" src="{{item}}"></image>Page({/*** 页面的初始数据*/data: {img:""},//拍照chooseImg(){wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success:(res)=>{// tempFilePath可以作为img标签的src属性显示图片const tempFilePaths = res.tempFilePathsconsole.log(tempFilePaths)this.setData({img:tempFilePaths})}})}
})

七、wx.showActionSheet

显示操作菜单

属性	类型	默认值	必填	说明
itemList	Array.<string>		是	按钮的文字数组，数组长度最大为 6
itemColor	string	#000000	否	按钮的文字颜色
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

// pages/user/user.wxml
<button bindtap="showActionSheet">操作表</button>
// pages/user/user.js
// 打开操作表  模拟真机的拍照showActionSheet () {wx.showActionSheet({itemList: ['拍照', '从手机相册选取'],success(res) {console.log(res.tapIndex)switch (res.tapIndex) {case 0: console.log('调用拍照')break;case 1:console.log('从手机相册选取')break;default: console.log('选择了其中一个')}},fail () {console.log('你点击去了取消按钮')}})}

关于小程序的一些备注相关推荐

1. 基于JSP微信小程序汽车票订票售票系统设计与实现

   第1步(数据库操作):     导入sql数据库 第2步(网站发布):     使用ideal导入管理系统     设置根目录下 conn.jsp的数据库连接 和 网址地址(小程序使用)     运行 ...

2. 获取微信小程序wx.login 生成的code

   微信小程序获取用户信息需要调用微信内置都wx.login()方法,这个方法会生成一个时效很短的code,通过微信另外都接口,使用code作为参数我们可以获得用户的openid.unionid等信息,然 ...

3. 微信小程序开发（原生和uniapp）DOM标签对比介绍

   时间线 vue 2014年对外发布 uniapp 2015年对外发布 微信小程序,2017公测,对外发布 题主2013年毕业,从事互联网开发,这几个刚好碰上.从前后端不分离到分离,Html4到html ...

4. 微信小程序运营系列（十）——不花钱做引流？ 火锅店运营实操讲解

   今天我们将以一个实体餐饮店店"吐槽鱼府"的活动实操案例来给大家讲解.首先,给大家展示经过我们的策划互动,吐槽鱼府 12 天活动期间取得的成果: 想要一个活动成功有效的,应该怎么做? ...

5. 马化腾：腾讯要帮助中国加快数字化，主要靠小程序（附演讲）

   整理 | DavidZh 出品 | AI科技大本营(公众号ID:rgznai100) 4 月 12 日上午,腾讯创始人马化腾在互联网+峰会上发表演讲,用一个目标.三个角色.五个领域和七种工具来解释接下 ...

6. 微信小程序 统一支付 php,微信/微信小程序统一下单(PHP版)

   事先准备工作 1.开通公众号/小程序支付 2.商户号后台设置支付目录.回调目录.白名单等设置. 3.记录商户号ID(mchid)和生成支付key 需要准备辅助函数 //---------------- ...

7. 微信小程序开发流程介绍

   1&:起步 一.申请账号: 点击 mp.weixin.qq.com/wxopen/ware- 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号. 登录 mp.weixin.qq.c ...

8. 看完这些细分领域别说小程序代理创业没有机会

   2019年小程序的后劲越来越足,创业者想要切入,一定要了解目前小程序创业下哪些细分领域应用最广,最容易落地,今天闪云科技小程序(i.cswz.cn)在这里就为大家盘一盘如今最火热的小程序细分领域. 小 ...

9. php小程序地图处理,微信小程序 地图map详解及简单实例

   微信小程序 地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...

最新文章

1. python编码问题无法复现_Python编码问题详解
2. 经典角点检测算法实现
3. 【数据结构与算法】常用算法
4. C3P0连接池工具类使用
5. 未来如何与计算机和谐相处,未来计算机将进入身体和大脑，大脑将和云连接
6. 微信灰度测试“相关阅读”功能 公众号文章下推荐延伸内容
7. opencv imread 读入图像为空
8. android代码shell命令申请权限,如何授予Android Shell用户更多权限？
9. 企业与黑客攻击 就是一场军备竞赛
10. java计算一个日子距离_java计算两地距离(公里)
11. 毫米波雷达探测应用，智能人体感应雷达，家居雷达方案新体验
12. 深圳大数据学习：怎样进行大数据的入门级学习？
13. 常见的web前端编程软件
14. 多功能数字时钟（VHDL）
15. html设置模块居中,DW怎么设置DIV模块在页面中居中?
16. C++：使用vector容器中的erase和swap释放内存
17. DHTMLX JS Gantt Library 7.1.13
18. 高斯投影坐标计算例题_高斯投影坐标计算程序下载
19. 超级教程推荐给大家一个方便简单操作的内网穿透软件frp穿透青龙面板
20. ICCV2021 | Vision Transformer中相对位置编码的反思与改进

热门文章

1. Android 多选按钮Button
2. 大数据测试之大数据系统及特点
3. Elasticsearch集群部署及Head插件安装
4. 经济学的思维方式-1 没有免费的午餐
5. Matlab自制Colorbar（一）
6. 计算机系统网络与电信杂志,电脑与电信
7. 程序员眼中浏览器什么样？IE表示：有本事把我卸了！
8. 正则匹配字符串里的a标签
9. 使用AppEEARS下载数据（以MODIS GPP数据产品为例）
10. 走自己的路，做最好的自己