广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
微信小程序，简称小程序。英文名mini program，是一种不需要下载安装就可以直接使用的应用。他实现了触手可及的梦想。用户扫一扫或搜一下就可以直接打开应用。
应用号，后改名小程序。2016年8月12日，开始内测2017年1月9日，上线#环境规范
注册账号
mp.weixin.qq.com/ (帐号信息 --- 邮箱激活 --- 信息登记)
获取id
APPID （[登录微信公众平台](https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=942994743&lang=zh_CN) ---> 开发 ---> 开发设置）复制代码登录后复制
开发者工具
微信开发者工具下载
小程序开发者工具开发者工具介绍
快捷键：
1. ctrl + shift + F (搜索)2. alt + shift + F (代码格式化---VSCode)复制代码登录后复制小程序原生框架
小程序的原生框架，mina框架 框架详情
小程序配置文件（写配置文件在微信开发者工具工具写，有提示）app.json 全局配置文件
配置全局文件* pages：添加要创建的文件项，保存后就会自动生成文件* [windows](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html)：设置小程序的状态栏，导航条，标题窗口颜色复制代码登录后复制
* [tabBar](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)复制代码登录后复制
page.json 页面配置文件
sitemap
小程序的模板语法WXML ---> HTML (结合基础组件，事件系统，构件出页面结构)
相当于 ，行内标签，不会换行相当于，块级元素，会换行数据绑定{{ 数据 }}
运算 --> 表达式（ 数值计算，字符串拼接，三元表达式）
列表循环 （wx:for）
wx:key绑定的是数组中的为唯一属性，wx:key=this表示数组是普通数组，`this`是循环项
<view wx:for="{{ person }}" wx:for-item="item" wx:for-index="index"wx:key="id"> 索引： {{ index }} 名称： {{ item.name }}</view>复制代码登录后复制标签 ---> 占位标签
条件渲染（wx:if）（wx:if, wx:elif, wx:else） (hidden 属性是通过添加样式的方式来呈现的)
当标签不是频繁的切换使用if，频繁切换使用hidden
事件绑定关键字：bind （bindinput，bindtap【点击事件】）
获取事件源对象的值：
e.detail.value复制代码登录后复制
获取data中数据的值：
this.data.属性名复制代码登录后复制
将事件源对象的值设置回data中：
this.setData({ num: this.data.num + operation});复制代码登录后复制事件绑定是不能直接传参，要通过自定义属性的方式传参（ {{ 传递的参数}} ）：
<button bindtap="bandletap" data-operation="{{ 1 }}">+</button> bandletap(e) { // console.log(e); const operation = e.currentTarget.dataset.operation; this.setData({ num: this.data.num + operation }); },复制代码登录后复制样式尺寸单位当屏幕宽度等于 750px 时，1px = 1rpx
当屏幕宽度等于375px时， 1px =0.5rpx
样式导入只支持相对路径选择器（微信小程序不支持通配符）小程序的内置组件小程序中常用的布局组件：
view,text,rich-text,button,image,icon,swiper,radio,checkbox等。复制代码登录后复制
view标签 相当于 p标签
text标签 只能嵌套text标签 长按文字可以复制【selectable】（只有这个标签有这个功能） 可以对回车,空格进行编码 (decode)
image标签 （打包上线的大小不能超过2M，使用图片的时候统一使用外网图片）
图片存在默认的宽高（320px * 240px）
mode 决定 图片内容 和 图片标签 做适配
scaleToFill 默认值 不保持纵横比，拉伸至标签定义的宽高
aspectFit 保持宽高比，保证图片的长边完全显示（常用 轮播图）
aspectFill 短边完全显示
widthFix 宽度不变，高度自动变化，保持原宽高比不变
top，left，bottom，right 背景图定位
小程序中的图片 直接支持 懒加载
lazy-load 会自己判断 当图片出现在视口的上下三屏之内的时候，自己开始加载图片
swiper标签 ---》 轮播图
swiper高度 = swiper的宽度 * 图片的高度 / 原图的宽度
1. ctrl + shift + F (搜索)2. alt + shift + F (代码格式化---VSCode)复制代码0登录后复制
navigator 导航组件 (块级元素，默认换行)
1. ctrl + shift + F (搜索)2. alt + shift + F (代码格式化---VSCode)复制代码1登录后复制
rich-text(富文本标签，将字符串解析成对应标签，相当于v-html)
1. ctrl + shift + F (搜索)2. alt + shift + F (代码格式化---VSCode)复制代码2登录后复制
button 按钮
大小（size:mini/default），颜色(type:default/primary/warn)，是否镂空（plain），是否在文字前有加载loading（loading），开发能力（opentype）
开放能力（opentype）:
concat 直接打开 客服对话 功能，需要在小程序的后台配置
将小程序的appid由测试号改为自己的appid登录微信小程序官网，添加 客服 - 微信share 转发当前小程序到微信朋友中 ，不能把小程序转发到朋友圈中
getPhoneNumber 获取当前用户的手机号码，结合事件来使用，不是企业的小程序账号 没有权限来获取用户的手机号码
getUserInfo获取用户的个人信息
launchApp在 小程序 中直接打开 app
openSetting 打开小程序内置的授权页面
只会出现用户点击过的权限
feedback 打开小程序内置的意见反馈页面
icon
type：类型 success，success_no_circle,info,warn,wating.success_no_circle,info,warn,waiting，cancel,downkload，search，clear
size：大小 number / string
color：颜色
radio 单选框
1. ctrl + shift + F (搜索)2. alt + shift + F (代码格式化---VSCode)复制代码3登录后复制
checkbox 多选框
1. ctrl + shift + F (搜索)2. alt + shift + F (代码格式化---VSCode)复制代码4登录后复制小程序的生命周期应用生命周期
触发过程：
onLaunch -》 onShow
1. ctrl + shift + F (搜索)2. alt + shift + F (代码格式化---VSCode)复制代码5登录后复制页面生命周期
onLoad -> onShow -> onReady
1. ctrl + shift + F (搜索)2. alt + shift + F (代码格式化---VSCode)复制代码6登录后复制小程序自定义组件
步骤：
创建
声明（那个页面要使用自定义组件，就在那个页面的json文件中声明）
1. ctrl + shift + F (搜索)2. alt + shift + F (代码格式化---VSCode)复制代码7登录后复制
使用
1. ctrl + shift + F (搜索)2. alt + shift + F (代码格式化---VSCode)复制代码8登录后复制
注意：
页面的.js文件中，存放事件回调函数的时候，存放在data同层级下
组件的.js文件中，存放时间的回调函数的时候，存放在methods中
在小程序中不要直接通过this.data.x.来修改数组的值（建议先拷贝一份数组，然后再对拷贝的数组进行修改）
1. ctrl + shift + F (搜索)2. alt + shift + F (代码格式化---VSCode)复制代码9登录后复制组件之间的传值父组件向子组件传值
通过 标签的属性来传递的：
父组件传递
配置全局文件* pages：添加要创建的文件项，保存后就会自动生成文件* [windows](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html)：设置小程序的状态栏，导航条，标题窗口颜色复制代码0登录后复制
子组件接收
配置全局文件* pages：添加要创建的文件项，保存后就会自动生成文件* [windows](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html)：设置小程序的状态栏，导航条，标题窗口颜色复制代码1登录后复制
子组件使用父组件中传递过来的数据
将接收过来的数据当作本身data中的数据来使用
配置全局文件* pages：添加要创建的文件项，保存后就会自动生成文件* [windows](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html)：设置小程序的状态栏，导航条，标题窗口颜色复制代码2登录后复制子组件向父组件传值
通过事件来传递的。
tab切换栏，点击切换。
绑定点击事件 需要在methods中绑定获取被点击的索引获取原数组对数组循环给每一个循环项 选中属性 改为 false给 当前的索引 的 项 添加激活选中效果点击事件触发的时候，触发父组件中的自定义事件同时传递给父组件this.triggerEvent("父组件自定义事件的名称"，要传递的参数)Tabs页面中：
配置全局文件* pages：添加要创建的文件项，保存后就会自动生成文件* [windows](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html)：设置小程序的状态栏，导航条，标题窗口颜色复制代码3登录后复制
子组件的js文件中：(这样写不能改变组件内部的数据，只是基于样式的改变，不是基于功能)
配置全局文件* pages：添加要创建的文件项，保存后就会自动生成文件* [windows](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html)：设置小程序的状态栏，导航条，标题窗口颜色复制代码4登录后复制
在父组件中的自定义组件中添加自定义事件：
配置全局文件* pages：添加要创建的文件项，保存后就会自动生成文件* [windows](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html)：设置小程序的状态栏，导航条，标题窗口颜色复制代码5登录后复制
父组件的js中：
配置全局文件* pages：添加要创建的文件项，保存后就会自动生成文件* [windows](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html)：设置小程序的状态栏，导航条，标题窗口颜色复制代码6登录后复制其他属性
在阿里图标官网，将要使用的图标，加入购物车
将图标，加入项目
小程序 pyg ---》 Font class（通过类的方式来使用图标） ---》 查看在线链接
在项目的styles文件夹中，创建iconfont.wxss文件
打开链接，将链接中的内容复制到iconfont.wxss文件中
使用字体图标库中的字体
在全局wxss文件中，引入wxss文件
配置全局文件* pages：添加要创建的文件项，保存后就会自动生成文件* [windows](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html)：设置小程序的状态栏，导航条，标题窗口颜色复制代码7登录后复制
使用
配置全局文件* pages：添加要创建的文件项，保存后就会自动生成文件* [windows](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html)：设置小程序的状态栏，导航条，标题窗口颜色复制代码8登录后复制tabBar
在app.json中配置
配置全局文件* pages：添加要创建的文件项，保存后就会自动生成文件* [windows](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html)：设置小程序的状态栏，导航条，标题窗口颜色复制代码9登录后复制页面样式的初始化
注意：在小程序中是不支持 通配符（*）的
在app.wxss文件中
* [tabBar](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)复制代码0登录后复制
使用主题颜色:
* [tabBar](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)复制代码1登录后复制头部
设置主题色:
* [tabBar](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)复制代码2登录后复制使用接口数据
* [tabBar](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)复制代码3登录后复制
请求报错(两种解决方法):
在小程序详情 界面 勾选上 不校验合法域名,web-view(业务域名),TLS版本以及HTTPS证书配置请求接口 见 8.7.将小程序请求的域名添加到后台解决回调地狱的问题(es6的promise)在项目的request文件夹中创建index.js文件
通过封装方法,然后调用函数传递参数的方式来使用
* [tabBar](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)复制代码4登录后复制
使用封装好的请求方法:
* [tabBar](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)复制代码5登录后复制将小程序请求的域名添加到后台进入
微信公众平台开发开发设置服务器域名添加request合法域名获取本地存储的数据web中的本地存储 和 小程序中的本地存储的区别：
写代码的方式不一样web中：存储方式：localStorage.setItem("key", "value");获取方式： localStorage.getItem("key");小程序中：存储方式：wx.setStorageSync("key", "value");获取方式：wx.getStorageSync("key", "value");存的时候 有没有做类型转换web：不管存的数据是什么类型的数据，最后都会通过toString（）方法转换为字符串类型的数据小程序：不存在数据的类型转换* [tabBar](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)复制代码6登录后复制定义公共的url
在request.js文件中，封装请求方法
* [tabBar](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)复制代码7登录后复制小程序支持es7的async语法
在微信开发者工具中勾选es6转es5语法
在github里面下载regenerator库中的runtime.js
在小程序目录文件下新建文件夹/lib/runtime/runtime.js，将代码拷贝进去
在每一个需要使用async语法的页面js文件中，引入文件
* [tabBar](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)复制代码8登录后复制
使用asyn语法：
* [tabBar](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)复制代码9登录后复制小程序url传参
<view wx:for="{{ person }}" wx:for-item="item" wx:for-index="index"wx:key="id"> 索引： {{ index }} 名称： {{ item.name }}</view>复制代码0登录后复制封装tab切换组件封装的Tab组件中：
<view wx:for="{{ person }}" wx:for-item="item" wx:for-index="index"wx:key="id"> 索引： {{ index }} 名称： {{ item.name }}</view>复制代码1登录后复制使用封装的Tab组件：
<view wx:for="{{ person }}" wx:for-item="item" wx:for-index="index"wx:key="id"> 索引： {{ index }} 名称： {{ item.name }}</view>复制代码2登录后复制滚动条触底事件（页面上滑事件）滚动条触底，加载下一页数据
总页数 = Math.ceil(总条数 / 每页显示的数据数)
<view wx:for="{{ person }}" wx:for-item="item" wx:for-index="index"wx:key="id"> 索引： {{ index }} 名称： {{ item.name }}</view>复制代码3登录后复制下拉刷新页面触发下拉刷新事件（需要在页面的json文件中开启一个配置项）【enablePullDownRefresh: true,backgroundTextStyle: dark】重置 数据 数组重置页码 设置为1重新发送请求数据请求成功，手动关闭等待效果<view wx:for="{{ person }}" wx:for-item="item" wx:for-index="index"wx:key="id"> 索引： {{ index }} 名称： {{ item.name }}</view>复制代码4登录后复制wx.showModel改变this的指向问题<view wx:for="{{ person }}" wx:for-item="item" wx:for-index="index"wx:key="id"> 索引： {{ index }} 名称： {{ item.name }}</view>复制代码5登录后复制js中的删除<view wx:for="{{ person }}" wx:for-item="item" wx:for-index="index"wx:key="id"> 索引： {{ index }} 名称： {{ item.name }}</view>复制代码6登录后复制弹窗的封装在asyncWX.js文件中
<view wx:for="{{ person }}" wx:for-item="item" wx:for-index="index"wx:key="id"> 索引： {{ index }} 名称： {{ item.name }}</view>复制代码7登录后复制使用
<view wx:for="{{ person }}" wx:for-item="item" wx:for-index="index"wx:key="id"> 索引： {{ index }} 名称： {{ item.name }}</view>复制代码8登录后复制获取缓存中的数据<view wx:for="{{ person }}" wx:for-item="item" wx:for-index="index"wx:key="id"> 索引： {{ index }} 名称： {{ item.name }}</view>复制代码9登录后复制微信支付企业账号在企业账号的小程序后台中 必须 给 开发者添加上白名单一个AppID可以绑定多个开发者绑定之后的开发者就拥有了开发者的权限了支付按钮先判断缓存中有没有token没有 跳转到授权页面 获取用户的 token 值有 执行支付操作流程：创建订单，准备预支付，发起微信支付，查询订单
一，获取token
e.detail.value复制代码0登录后复制
page/autn/index页面中：
e.detail.value复制代码1登录后复制
e.detail.value复制代码2登录后复制
在asyncWX.js文件中封装支付方法：
e.detail.value复制代码3登录后复制
二，准备预支付（获取参数 pay）
三，发起微信支付（提交pay参数）
四，查询订单
五，删除缓存中已经被选中购买的商品
六，删除后的购物车数据 填充会缓存
七，跳转页面
图片上传（wx.uploadFile）图片上传的时候，存储上传的图片的时候，要先拼接上之前的图片。
chooseImage：[],
this.setData({
chooseImage: [上传之前的图片组, 上传的图片组]
chooseImage: [...this.data.chooseImage, ...chooseImage]
})
上传文件的api不支持多个文件同时上传
解决方法：遍历数组 挨个上传
e.detail.value复制代码4登录后复制项目发布
注意：发布之前记得关闭详情界面的 不校验合法域名
上传的每个文件大小不超过2M，总大小不超过10M。
上传：
版本号第一个数字（大版本的更新）第二个数字（重要功能更新）第三个数字（最小功能，小bug，小补丁）less文件是不会被打包上传的上传成功后的小程序还是一个体验版本的小程序，如果需要将体验版本的小程序变成线上版本的小程序，就在 微信公众平台将提交的体验本的小程序，提交审核（审核的时间大概是一个小时）。小程序插件小程序开发助手
安装easy less插件在vscode中配置(ctrl + shift + p 然后输入 setting，然后添加上如下配置)：
e.detail.value复制代码5登录后复制
相关免费学习推荐：微信小程序开发
以上就是放心，手把手教你写微信小程序的详细内容，更多请关注9543建站博客其它相关文章！
发表评论