微语:代码适合中午敲,早晚出BUG
小程序入门教程 微信小程序
1. 微信小程序介绍
只能通过微信APP, 扫码/点击链接, 进入的特殊"网页"的集合.
无需下载安装包(扫码直用)
2. 移动端应用分类
H5APP: 使用传统WEB技术(H5+CSS3+JS), 在浏览器中运行的网页
小程序: 使用自家开发技术栈研发的小应用, 只能在特定APP中扫码/点击打开(微信小程序, 支付宝小程序)
原生APP: 需要下载安装包, 安装才能使用, 区分IOS/ANDROID ! 安装包不互通
3. 小程序的开发流程
3.1 注册小程序开发者账号
https://mp.weixin.qq.com/
3.2 下载小程序专用开发IDE-微信开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3.3 通过微信开发者工具, 新建项目
每次创建项目需要填写自己的小程序AppID
4. 小程序的核心目录
(重要)pages -- 小程序所有核心页面
utils -- 工具文件夹
.eslintrc.js -- eslint语法检测配置文件
app.js -- 入口js文件
app.json -- 全局配置
app.wxss -- 全局样式
project.config.json -- 工程配置1
project.private.config.json -- 工程配置2
sitemap.json -- 其他描述
5. 小程序的页面结构
小程序并非HTML, 所以有一套自己的开发模式和文件类型
.js -- 页面的逻辑
.json -- 页面的配置
.wxml -- 页面的结构
.wxss -- 页面的样式
6. 小程序独有常用标签
navigator: 超链接, 允许跳转到小程序的任意页面
view: 容器!! ===div
text: 文本 ===span
swiper: 轮播组件
swiper-item: 轮播的儿子
例:
<swiper>
<swiper-item>元素1</swiper-item>
<swiper-item>元素2</swiper-item>
..
</swiper>
- button: 按钮
- input: 输入框
- image: 图片
- icon: 系统送的图标
- scroll-view: 可以滚动的view容器
- map: 地图
7. 小程序的事件
小程序只有两种事件: 冒泡(bind), 非冒泡(catch)
事件类型:
- tap: 触摸
- longpress: 长按(0.35s)
- touchstart: 触摸开始
- touchend: 触摸结束
- touchmove: 触摸后开始移动
-
touchcancel: 触摸后被系统弹窗/电话等打断
绑定方式: bindtap冒泡触摸 catchtap非冒泡触摸
8. 小程序的数据驱动
8.1 把要变化的数据放入data中
data: {
name: 'zhangsan'
}
8.2 使用mustauche获取动态数据, 小程序不区分内容还是属性, 都是用{{}}获取
<view name="{{ test }}">测试{{ aa }}</view>
8.3 修改数据
this.setData({
//key要修改的key名: value新的值
name: 'lisi'
})
9. 小程序其他
底部 tabBar
自定义头部导航 navigationStyle
获取胶囊坐标 wx.getMenuButtonBoundingClientRect()
添加元素之前先判断是数组里面是否存在 微信小程序
使用includes来判断,如果存在就用filter来过滤出不一样的
if (this.sosuo.includes(so)) {
this.sosuo = this.sosuo.filter(num => num !== so);
}
微信小程序的几个主要文件 微信小程序
一个小程序一般包含多个文件。虽然具体的文件数量可以根据开发需求和项目复杂性而变化,但一般的小程序包含以下几个主要文件:
app.js:小程序的全局脚本文件,包含小程序的生命周期和全局方法。
app.json:小程序的全局配置文件,可以设置小程序的页面、窗口样式和网络请求等。
app.wxss:小程序的全局样式文件,定义小程序的公共样式。
pages 目录:包含小程序的页面文件,每个页面通常由一个 .js、.json 和 .wxml、.wxss 文件组成。
.js 文件:页面的逻辑脚本文件,包含页面的事件处理和数据绑定等。
.json 文件:页面的配置文件,可以设置页面的标题、导航栏样式等。
.wxml 文件:页面的结构文件,类似于HTML,用于描述页面的结构和内容。
.wxss 文件:页面的样式文件,用于定义页面的样式和布局。
除了以上主要文件外,小程序还可能包含其他一些辅助文件,如图片、音频、视频等资源文件,以及组件和插件的文件。
注:以上仅是一般情况下的文件组织结构,具体的文件数量和组织方式可能因开发者的需求而有所不同。
微信小程序调用扫码API 微信小程序
一:app.json 文件中添加相机权限
"permission": {
"scope.camera": {
"desc": "用于扫码功能"
}
}
二:触发事件
<view class="list-img" bindtap="takePhoto">
<text>二维码</text>
</view>
三:事件代码
takePhoto(){
wx.scanCode({
onlyFromCamera: false, // 是否只允许从相机扫码,设为 true 则只能从相机扫码,不会从相册选择图片进行扫码,默认为 false
scanType: ['qrCode', 'barCode'], // 所支持的码类型,Array 类型,默认支持所有类型的码
success: function(res) {
console.log(res.result); // 打印扫码结果
console.log(res.scanType); // 打印扫码的码类型
console.log(res.charSet); // 打印扫码的字符集
console.log(res.path); // 打印扫码的路由路径
console.log(res.rawData); // 打印原始扫码数据,仅在 certain conditions 下可用
},
fail: function(res) {
console.log(res.errMsg); // 打印扫码失败的错误信息
}
});
},
微信小程序使用weui 微信小程序
1.app.json
"useExtendedLib": {
"kbone": true,
"weui": true
}
2.在页面的index.json中引入
"usingComponents": {
"mp-dialog": "weui-miniprogram/dialog/dialog"
},
3.使用
<mp-dialog title="这是一个弹窗" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
<view>这里是内容</view>
</mp-dialog>
微信小程序tabBar 微信小程序
实现微信小程序的导航跳转
1.在app.json中配置路由
"pages": [
"pages/index/index",
"pages/coupon/coupon",
"pages/shop/shop",
"pages/mine/mine"
],
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "image/index.png",
"selectedIconPath": "image/indexs.png"
},
{
"pagePath": "pages/coupon/coupon",
"text": "优惠券",
"iconPath": "image/index.png",
" ": "image/indexs.png"
},
{
"pagePath": "pages/shop/shop",
"text": "找好店",
"iconPath": "image/index.png",
"selectedIconPath": "image/indexs.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "image/index.png",
"selectedIconPath": "image/indexs.png"
}
]
},
iconPath:是你的图标
selectedIconPath:是激活的图标
pagePath:路径
text:标题名字
如果需要使用全局配置还需要在当前的json文件页面引入app.json
"usingComponents": {
"./app.json": "../../app.json"
}
效果图: