《《《【WEB前端】零基础玩转微信小程序
相关资料可以根据
资料:
链接:https://pan.baidu.com/s/17y6r44hrocXVjnPBVgJd5g
提取码:fk83 配套资料
里面的文档进行微信小程序注册和开发
微信官方文档地址
微信小程序官方文档
根据自己电脑选择下载开发工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
下载成功
安装完成使用其开发
微信小程序工具
官方地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
一:新建一个项目demo文件夹app.js——》在pages中写"pages/demo01/demo01",保存之后自动生成文件夹demo01。因为位置是在pages中排第一个所以默认是首页
字段的含义
二:背景
tabBar和pages,window是平行关系用逗号隔开
图片文件夹icon
打开icon文件夹
把icon放到项目文件夹中
添加页面
tabBar中的list数组中中最少要有两个数组,不然提示以下错误
"tabBar": { "list": [ { //“页面路径”:“pages文件夹/index文件夹/index.is文件(去掉js)” "pagePath": "pages/index/index",page/pages/mine/mine //“文本”:“名称” "text": "首页", //“图标路径”:“图标全称” "iconPath": "icon/_home.png", //“选择对话路径":“图片文件夹/图片全称” "selectedIconPath": "icon/home.png" }, { "pagePath": "pages/img/img", "text": "图片", "iconPath": "icon/_img.png", "selectedIconPath": "icon/img.png" } ],
1 { 2 "pages": [ 3 "pages/demo01/demo01", 4 "pages/index/index", 5 "pages/img/img", 6 "pages/mine/mine", 7 "pages/search/search", 8 "pages/demo02/demo02", 9 "pages/logs/logs" 10 ], 11 "window": { 12 "backgroundTextStyle": "dark", 13 "navigationBarBackgroundColor": "#0094ff", 14 "navigationBarTitleText": "我的应用", 15 "navigationBarTextStyle": "black", 16 "enablePullDownRefresh": true, 17 "backgroundColor": "yellow" 18 }, 19 "tabBar": { 20 "list": [ 21 { 22 "pagePath": "pages/index/index", 23 "text": "首页", 24 "iconPath": "icon/_home.png", 25 "selectedIconPath": "icon/home.png" 26 }, 27 { 28 "pagePath": "pages/img/img", 29 "text": "图片", 30 "iconPath": "icon/_img.png", 31 "selectedIconPath": "icon/img.png" 32 }, 33 { 34 "pagePath": "pages/mine/mine", 35 "text": "我的", 36 "iconPath": "icon/_my.png", 37 "selectedIconPath": "icon/my.png" 38 }, 39 { 40 "pagePath": "pages/search/search", 41 "text": "搜索", 42 "iconPath": "icon/_search.png", 43 "selectedIconPath": "icon/search.png" 44 },45 ], 46 }, 47 "sitemapLocation": "sitemap.json" 48 }
页面
有时候页面加载不出来,清理下缓存,退出程序重新登录就可以
在app.json中的pages中添加一个"pages/demo03/demo03"
<view> {{ message }} </view>
Page({ data: { message: 'Hello MINA!' } })
<view id="item-{{id}}"> </view>
Page({ data: { id: 0 } })
<checkbox checked="{{false}}"> </checkbox>
点击Wxml从控制台查看相关信息
相关代码dome03.wxml
1 <!-- 2 1 text 相当于以前web中的 span标签 行内元素 不会换行 3 2 view 相当于以前web中的 div标签 块级元素 会换行 4 3 checkbox 以前的复选框标签 5 --> 6 <!-- <text>1</text> 7 <text>2</text> 8 <view>1</view> 9 <view>2</view> --> 10 11 <!-- 1 字符串 --> 12 <view> {{msg}} </view> 13 <!-- 2 数字类型 --> 14 <view>{{num}}</view> 15 <!-- 3 bool类型 --> 16 <view> 是否是伪娘: {{isGirl}} </view> 17 <!-- 4 object类型 --> 18 <view>{{person.age}}</view> 19 <view>{{person.height}}</view> 20 <view>{{person.weight}}</view> 21 <view>{{person.name}}</view> 22 23 <!-- 5 在标签的属性中使用 --> 24 <view data-num="{{num}}"> 自定义属性</view> 25 26 <!-- 27 6 使用bool类型充当属性 checked 28 1 字符串和 花括号之间一定不要存在空格 否则会导致识别失败 29 以下写法就是错误的示范 30 <checkbox checked=" {{isChecked}}"> </checkbox> 31 32 --> 33 <view> 34 <checkbox checked="{{isChecked}}"> </checkbox> 35 </view> 36 37 38 <!-- 39 7 运算 => 表达式 40 1 可以在花括号中 加入 表达式 -- “语句” 41 2 表达式 42 指的是一些简单 运算 数字运算 字符串 拼接 逻辑运算。。 43 1 数字的加减。。 44 2 字符串拼接 45 3 三元表达式 46 3 语句 47 1 复杂的代码段 48 1 if else 49 2 switch 50 3 do while 。。。。 51 4 for 。。。 52 --> 53 <view>{{1+1}}</view> 54 55 <view>{{'1'+'1'}}</view> 56 57 <view>{{ 11%2===0 ? '偶数' : '奇数' }}</view> 58 59 60 <!-- 61 8 列表循环 62 1 wx:for="{{数组或者对象}}" wx:for-item="循环项的名称" wx:for-index="循环项的索引" 63 2 wx:key="唯一的值" 用来提高列表渲染的性能 64 1 wx:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是 循环数组 中的 对象的 唯一属性 65 2 wx:key ="*this" 就表示 你的数组 是一个普通的数组 *this 表示是 循环项 66 [1,2,3,44,5] 67 ["1","222","adfdf"] 68 3 当出现 数组的嵌套循环的时候 尤其要注意 以下绑定的名称 不要重名 69 wx:for-item="item" wx:for-index="index" 70 4 默认情况下 我们 不写 71 wx:for-item="item" wx:for-index="index" 72 小程序也会把 循环项的名称 和 索引的名称 item 和 index 73 只有一层循环的话 (wx:for-item="item" wx:for-index="index") 可以省略 74 75 9 对象循环 76 1 wx:for="{{对象}}" wx:for-item="对象的值" wx:for-index="对象的属性" 77 2 循环对象的时候 最好把 item和index的名称都修改一下 78 wx:for-item="value" wx:for-index="key" 79 80 --> 81 <view> 82 <view 83 wx:for="{{list}}" 84 wx:for-item="item" 85 wx:for-index="index" 86 wx:key="id" 87 > 88 索引:{{index}} 89 -- 90 值:{{item.name}} 91 </view> 92 </view> 93 94 <view> 95 <view>对象循环</view> 96 <view 97 wx:for="{{person}}" 98 wx:for-item="value" 99 wx:for-index="key" 100 wx:key="age" 101 > 102 属性:{{key}} 103 -- 104 值:{{value}} 105 </view> 106 </view> 107 108 <!-- 109 10 block 110 1 占位符的标签 111 2 写代码的时候 可以看到这标签存在 112 3 页面渲染 小程序会把它移除掉 113 --> 114 115 <view> 116 <block 117 wx:for="{{list}}" 118 wx:for-item="item" 119 wx:for-index="index" 120 wx:key="id" 121 class="my_list" 122 > 123 索引:{{index}} 124 -- 125 值:{{item.name}} 126 </block> 127 </view> 128 129 130 131 <!-- 132 11 条件渲染 133 1 wx:if="{{true/false}}" 134 1 if , else , if else 135 wx:if 136 wx:elif 137 wx:else 138 2 hidden 139 1 在标签上直接加入属性 hidden 140 2 hidden="{{true}}" 141 142 3 什么场景下用哪个 143 1 当标签不是频繁的切换显示 优先使用 wx:if 144 直接把标签从 页面结构给移除掉 145 2 当标签频繁的切换显示的时候 优先使用 hidden 146 通过添加样式的方式来切换显示 147 hidden 属性 不要和 样式 display一起使用 148 --> 149 150 <view> 151 <view>条件渲染</view> 152 <view wx:if="{{true}}">显示</view> 153 <view wx:if="{{false}}">隐藏</view> 154 155 <view wx:if="{{flase}}">1</view> 156 <view wx:elif="{{flase}}">2 </view> 157 <view wx:else> 3 </view> 158 159 <view>---------------</view> 160 <view hidden >hidden1</view> 161 <view hidden="{{false}}" >hidden2</view> 162 163 <view>-----000-------</view> 164 <view wx:if="{{false}}">wx:if</view> 165 <view hidden style="display: flex;" >hidden</view> 166 </view>
代码见 相关代码dome03.wxml
显示
代码见 相关代码dome03.wxml
报错信息放大
处理报错信息
<!-- 8 列表循环 1 wx:for="{{数组或者对象}}" wx:for-item="循环项的名称" wx:for-index="循环项的索引" 2 wx:key="唯一的值" 用来提高列表渲染的性能 1 wx:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是 循环数组 中的 对象的 唯一属性 2 wx:key ="*this" 就表示 你的数组 是一个普通的数组 *this 表示是 循环项 [1,2,3,44,5] ["1","222","adfdf"] 3 当出现 数组的嵌套循环的时候 尤其要注意 以下绑定的名称 不要重名 wx:for-item="item" wx:for-index="index" 4 默认情况下 我们 不写 wx:for-item="item" wx:for-index="index" 小程序也会把 循环项的名称 和 索引的名称 item 和 index 只有一层循环的话 (wx:for-item="item" wx:for-index="index") 可以省略 9 对象循环 1 wx:for="{{对象}}" wx:for-item="对象的值" wx:for-index="对象的属性" 2 循环对象的时候 最好把 item和index的名称都修改一下 wx:for-item="value" wx:for-index="key" -->
<view> <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id" > 索引:{{index}} -- 值:{{item.name}} </view> </view>
<block wx:for="{{[1, 2, 3]}}" wx:key="*this" > <view> {{index}}: </view> <view> {{item}} </view> </block>
<!-- 11 条件渲染 1 wx:if="{{true/false}}" 1 if , else , if else wx:if wx:elif wx:else 2 hidden 1 在标签上直接加入属性 hidden 2 hidden="{{true}}" 3 什么场景下用哪个 1 当标签不是频繁的切换显示 优先使用 wx:if 直接把标签从 页面结构给移除掉 2 当标签频繁的切换显示的时候 优先使用 hidden 通过添加样式的方式来切换显示 hidden 属性 不要和 样式 display一起使用 -->
7.4.1. wx:if 在框架中,使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{false}}">1</view> <view wx:elif="{{true}}">2</view> <view wx:else>3</view> 7.4.2. hidden <view hidden="{{condition}}"> True </view> 类似 wx:if 频繁切换 ⽤ hidden 不常使⽤ ⽤ wx:if
效果图
说明:点击加号下面数字增加,点击减号下面数字减少
新建一个页面demo04
找到js文件,只保留data其他删除
绑定事件
js代码
// pages/demo04/demo04.js
Page({
data: {
num: 0
},
// 输入框的input事件的执行逻辑
handleInput(e) {
// console.log(e.detail.value );
this.setData({
num: e.detail.value
})
},
// 加 减 按钮的事件
handletap(e) {
// console.log(e);
// 1 获取自定义属性 operation
const operation = e.currentTarget.dataset.operation;
this.setData({
num: this.data.num + operation
})
}
})
html代码
<!-- 1 需要给input标签绑定 input事件 绑定关键字 bindinput 2 如何获取 输入框的值 通过事件源对象来获取 e.detail.value 3 把输入框的值 赋值到 data当中 不能直接 1 this.data.num=e.detail.value 2 this.num=e.detail.value 正确的写法 this.setData({ num:e.detail.value }) 4 需要加入一个点击事件 1 bindtap 2 无法在小程序当中的 事件中 直接传参 3 通过自定义属性的方式来传递参数 4 事件源中获取 自定义属性 --> <input type="text" bindinput="handleInput" /> <button bindtap="handletap" data-operation="{{1}}" >+</button> <button bindtap="handletap" data-operation="{{-1}}">-</button> <view> {{num}} </view>
新增demo05界面
小程序中不需要主动引入样式文件的
/* 1 小程序中 不需要主动来引入样式文件 2 需要把页面中某些元素的单位 由 px 改成 rpx 1 设计稿 750x 750 px = 750 rpx 1 px = 1 rpx 2 把屏幕宽度 改成 375px 375 px = 750 rpx 1 px = 2rpx 1rpx = 0.5px 3 存在一个设计稿 宽度 414 或者 未知 page 1 设计稿 page 存在一个元素 宽度 100px 2 拿以上的需求 去实现 不同宽度的页面适配 page px = 750 rpx 1 px = 750 rpx / page 100 px = 750 rpx * 100 / page 假设 page = 375px 4 利用 一个属性 calc属性 css 和 wxss 都支持 一个属性 1 750 和 rpx 中间不要留空格 2 运算符的两边也不要留空格 */ view{ /* width: 200rpx; */ height: 200rpx; font-size: 40rpx; background-color: aqua; /* 以下代码写法是错误 */ /* width:750 rpx * 100 / 375 ; */ /* 正确写法 */ width:calc(750rpx * 100 / 375); }
../为上一层
wxml中
特别需要注意的是 ⼩程序 不⽀持通配符 *
*{ margin:0; padding:0; box-sizing:border-box; }
"less.compile": { "outExt": ".wxss" }
- P23 24-view和text标签
- P24 25-image图片标签
- P25 26-swiper-等比例计算swiper的高度
- P26 27-swiper-常见属性
- P27 28-navigator导航标签
- P28 29-rich-text富文本标签
- P29 30-button-外观样式
- P30 31-button的开放能力1
- P31 32-button的开放能力2
- P32 33-icon图标
- P33 34-radio单选框
- P34 35-checkbox复选框
- P35 36-自定义组件的介绍
- P36 37-自定义组件的初体验
- P37 38-自定义组件-Tabs-样式优化
- P38 39-自定义组件-标题激活选中
- P39 40-自定义组件-父向子传递数据
- P40 41-自定义组件-子向父传递数据
- P41 42-自定义组件-slot
- P42 43-组件的其他属性
- P43 44-应用生命周期
- P44 45-页面生命周期
- P45 01-项目预览
- P46 02-项目的技术选型
- P47 03-项目搭建步骤一
- P48 04-项目搭建步骤二(引入iconfont)
- P49 05-项目搭建步骤三(搭建tabbar)
- P50 06-项目搭建步骤四-初始化页面样式
- P51 07-首页-搜索框
- P52 08-首页-获取轮播图数据
- P53 09-首页-轮播图-动态渲染
- P54 10-将原生的请求修改为promise的方式
- P55 11-首页-分类导航
- P56 12-首页-楼层1
- P57 13-首页-楼层2
- P58 14-分类-接口数据和页面效果的关系
- P59 15-分类-获取接口数据
- P60 16-分类-页面布局1
- P61 17-分类-页面布局2
- P62 18-分类-点击菜单切换商品内容
- P63 19-分类-使用缓存技术
- P64 20-分类-点击菜单-右侧列表置顶
- P65 21-优化接口代码-提取公共接口路径
- P66 22-优化接口-简化返回值和使用es7的async
- P67 23-商品列表-获取分类id
- P68 24-商品列表-实现搜索框和tabs组件
- P69 25-商品列表-静态样式
- P70 26-商品列表-动态渲染
- P71 27-商品列表-加载下一页数据
- P72 28-商品列表-下拉刷新
- P73 29-添加全局的正在加载中图标效果
- P74 30-商品详情-获取数据
- P75 31-商品详情-接口数据和页面分析
- P76 32-商品详情-轮播图动态渲染
- P77 33-商品详情-价格&名称&图文详情
- P78 34-商品详情-优化动态渲染
- P79 35-商品详情-放大预览图片
- P80 36-商品详情-底部工具栏
- P81 37-商品详情-加入购物车
- P82 38-购物车-购物车分析&收货按钮样式
- P83 39-购物车-收货地址分析
- P84 40-购物车-完整的获取收货地址流程
- P85 41-购物车-优化获取收货地址的代码
- P86 42-购物车-收货地址和按钮切换显示
- P87 43-购物车-购物车列表-静态样式
- P88 44-购物车-底部工具栏-静态结构
- P89 45-购物车-数据动态渲染
- P90 46-购物车-全选-数据展示
- P91 47-购物车-总价格和总数量
- P92 48-购物车-商品选中
- P93 49-购物车-全选-反选
- P94 50-购物车-商品数量编辑
- P95 51-购物车-商品删除
- P96 52-购物车-没有商品的状态提示
- P97 53-购物车-结算按钮功能
- P98 54-支付-数据展示
- P99 55-支付-支付权限的分析
- P100 56-支付-订单创建分析
- P101 57-支付-获取用户token
- P102 58-支付-创建订单
- P103 59-支付-完成微信支付
- P104 60-支付-移除购物车已经支付的数据
- P105 61-封装统一的请求头到request方法中
- P106 62-登录-获取用户信息
- P107 63-个人中心-背景展示
- P108 64-个人中心-历史足迹&我的订单-静态结构
- P109 65-个人中心-其他的静态结构
- P110 66-订单查询-引入tabs组件
- P111 67-订单查询-获取订单接口数据
- P112 68-订单查询-动态修改订单标题
- P113 69-订单查询-页面动态渲染
- P114 70-商品详情-页面加载获取收藏数据
- P115 71-商品详情-点击图标切换收藏
- P116 72-个人中心-显示收藏的商品数量
- P117 73-商品收藏-引入自定义tabs组件
- P118 74-商品收藏-页面动态渲染
- P119 75-搜索中心-静态页面
- P120 76-搜索中心-渲染搜索结果
- P121 77-搜索中心-防抖的实现
- P122 78-搜索中心-页面痕迹重置
- P123 79-意见反馈-引入tabs组件
- P124 80-意见反馈-静态结构
- P125 81-意见反馈-自定义图片组件
- P126 82-意见反馈-选择并显示图片
- P127 83-意见反馈-删除图片
- P128 84-意见反馈-提交功能
- P129 85-首页-添加商品的跳转链接
- P130 86-项目发布
**便捷页面总结***************************************************************
相关资料可以根据
资料:
链接:https://pan.baidu.com/s/17y6r44hrocXVjnPBVgJd5g
提取码:fk83 配套资料
里面的文档进行微信小程序注册和开发
微信官方文档地址
微信小程序官方文档
根据自己电脑选择下载开发工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
0.新建⼩程序项⽬
1.新建一个项目页面
2.数据绑定
3.在vscode(Visual Studio Code)安装easy less
4.
5.
6.