微信小程序小白轻松上手基础教程 1
微信小程序
基本结构
页面配置
页面配置
app.json 中的部分配置,也支持对单个页面进行配置,可以在页面对应的 .json
文件来对本页面的表现进行配置。
页面中配置项在当前页面会覆盖 app.json
中相同的配置项(样式相关的配置项属于 app.json
中的 window
属性,但这里不需要额外指定 window
字段),具体的取值和含义可参考全局配置文档中说明。
文件内容为一个 JSON 对象,有以下属性:
配置项
属性 | 类型 | 默认值 | 描述 | 最低版本 |
---|---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色,如 #000000
|
|
navigationBarTextStyle | string | white | 导航栏标题颜色,仅支持 black / white
|
|
navigationBarTitleText | string | 导航栏标题文字内容 | ||
navigationStyle | string | default | 导航栏样式,仅支持以下值: default 默认样式 custom 自定义导航栏,只保留右上角胶囊按钮。 |
iOS/Android 微信客户端 7.0.0,Windows 微信客户端不支持 |
backgroundColor | HexColor | #ffffff | 窗口的背景色 | |
backgroundTextStyle | string | dark | 下拉 loading 的样式,仅支持 dark / light
|
|
backgroundColorTop | string | #ffffff | 顶部窗口的背景色,仅 iOS 支持 | 微信客户端 6.5.16 |
backgroundColorBottom | string | #ffffff | 底部窗口的背景色,仅 iOS 支持 | 微信客户端 6.5.16 |
enablePullDownRefresh | boolean | false | 是否开启当前页面下拉刷新。 详见 Page.onPullDownRefresh | |
onReachBottomDistance | number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为px。 详见 Page.onReachBottom | |
pageOrientation | string | portrait | 屏幕旋转设置,支持 auto / portrait / landscape 详见 响应显示区域变化
|
2.4.0 (auto) / 2.5.0 (landscape) |
disableScroll | boolean | false | 设置为 true 则页面整体不能上下滚动。 只在页面配置中有效,无法在 app.json 中设置 |
|
usingComponents | Object | 否 | 页面自定义组件配置 | 1.6.3 |
initialRenderingCache | string | 页面初始渲染缓存配置,支持 static / dynamic
|
2.11.1 | |
style | string | default | 启用新版的组件样式 | 2.10.2 |
singlePage | Object | 否 | 单页模式相关配置 | 2.12.0 |
restartStrategy | string | homePage | 重新启动策略配置 | 2.8.0 |
- 注:并不是所有
app.json
中的配置都可以在页面覆盖或单独指定,仅限于本文档包含的选项。 - 注:iOS/Android 客户端 7.0.0 以下版本,
navigationStyle
只在app.json
中生效。
配置示例
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
数据绑定
<!--字符串-->
<view>{{msg}}</view>
<!--数字类型-->
<view>{{num}}</view>
<!--bool类型-->
<view> 是否{{isGirl}}</view>
<!--object类型-->
<view> {{person.age}}</view>
<view> {{person.height}}</view>
<view> {{person.name}}</view>
<view data-="num">自定义属性</view>
<view>
<checkbox checked="{{ischecked}}"></checkbox>
</view>
js
data: {
msg:"hello ",
num:"1000",
isGirl:false,
person:{
age:18,
height:1.75,
weight:200,
name:"wagn"
}
},
ischecked:false
运算表达式
列表循环和对象
列表循环
wx:for=“{{数组或者对象}}”
wx: for item=" 循环项的名称”wx: for - index=" 循环项的索引”
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”) 可以省略
<view wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="id">
索引{{index}}
数值{{item.name}}
</view>
对象循环
1 wx:for=“{{对象}}” wx:for- item="对象的值” wx: for- index=“对象的属性”
2循环对象的时候最好把item和index的名称都修改一下
wx: for- item=“value”
Wx: for- index=“key”
代码
<view wx:for="{{person}}" wx:for-item="value" wx:for-index="key">
属性{{key}}
值{{value}}
</view>
person:{
age:18,
height:1.75,
weight:200,
name:"wagn"
},
条件渲染
11条件渲染
1 wx:if=“{{true/false}}”
2 if
,else,if else
wx:if
wx:elif
wx:else
<view wx:if="{{true}}">显示</view>
<view wx:else="{{false}}">隐藏</view>
<view wx:elif>no</view>
hidden
什么场景下用哪个
1当标签不是频繁的切换显示优先使用wx:if
直接把标签从页面结构给移除掉
2当标签频繁的切换显示的时候优先使用_ hidden
通过添加样式的方式来切换显示
<view hidden="{{true}}">134</view>
<view
hidden style="display:flex">123</view>
</view>
事件绑定
// pages/demo03/demo03.js
Page({
/**
* 页面的初始数据
*/
data: {
num:0
},
handleinput(e){
this.setData({
num:e.detail.value
})
},
handletap(e){
//获取自定义属性operaction
const {operaction} = e.currentTarget.dataset;
console.log(operaction);
this.setData({
num:this.data.num + operaction
})
}
})
小程序事件绑定
需要给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事件源中获取自定义属性
rpx
尺寸单位
拿以上的需求去实现不同宽度的页面适配
page px = 750 rpx
1px=750rpx/page
100px=750rpx*100/page
假设
page
375px
利用一个属性calc属性
CSS和wxss 都支持一个属性
750和rpx中间不要留空格
运算符的两边也不要留空格
view{
/* width: 200rpx; */
height: 200rpx;
font-size: 40rex;
background-color: #454659;
width:calc(750rpx * 100 / 375px);
}
样式导⼊
wxss中直接就⽀持,样式导⼊功能。
也可以和 less中的导⼊混⽤。
使⽤ @import
语句可以导⼊外联样式表,只⽀持相对路径
⼩程序中使⽤less
原⽣⼩程序不⽀持 less
,其他基于⼩程序的框架⼤体都⽀持,如 wepy mpvue , taro
等。
但是仅仅因为⼀个less功能,⽽去引⼊⼀个框架,肯定是不可取的。因此可以⽤以下⽅式来实现
\1. 编辑器是 vscode
\2. 安装插件 easy less
\3. 在vs code的设置中加⼊如下,配置
\4. 在要编写样式的地⽅,新建 less
⽂件,如 index.less
,然后正常编辑即可。
常见组件
布局组件
view,text,rich,text,button,image,navigator,icon,swiper,radio,checkbox
view
代替 原来的 div 标签
swiper
默认宽度 100% ⾼度 150px
<swiper autoplay interval="1000" circular indicator-dots="ture" indicator-active-color="pink">
<swiper-item><image mode="widthFix" src="./img/lun.jpg/"/></swiper-item>
<swiper-item><image mode="widthFix" src="./img/lun-1.png/"/></swiper-item>
<swiper-item><image mode="widthFix" src="./img/lun-2.jpg/"/></swiper-item>
</swiper>
navigator
导航组件
默认换行
open-type 有效值
navigate 有返回
redirect无返回
rich-text 富文本标签
类似v-html
nodes属性
使用
demo07.wxml
1.标签字符串
<rich-text nodes="<img
src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
ng" alt="">"></rich-text>
2.对象数组
<rich-text nodes="{{nodes}}"></rich-text>
demo07.js
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}]
}
icon
<view class="group">
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"/>
</block>
</view> <view class="group">
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="40"/>
</block>
</view> <view class="group">
<block wx:for="{{iconColor}}">
<icon type="success" size="40" color="{{item}}"/>
</block>
</view>
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconType: [
'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'
],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
},
lass=“group”>
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconType: [
‘success’, ‘success_no_circle’, ‘info’, ‘warn’, ‘waiting’, ‘cancel’,
‘download’, ‘search’, ‘clear’
],
iconColor: [
‘red’, ‘orange’, ‘yellow’, ‘green’, ‘rgb(0,255,255)’, ‘blue’, ‘purple’
],
},
推荐阅读
-
小白也能懂!微信小程序开发入门必知的基础知识
-
小白也能做!一步步教你如何开发属于自己的微信小程序
-
小白也能懂!微信小程序的登录步骤详解及图文指引
-
如何轻松实现微信小程序的自动化构建与部署(CI/CD)
-
微信小程序小白轻松上手基础教程 1
-
智联招聘发布第三季度平均薪酬报告;价值13亿美元的Metaverse日活跃用户仅38人;统一充电接口或让苹果一年损失数百亿美元 | EA周报 - 热点大事件 微信推出刷掌付小程序,开启全新支付模式 据悉,微信已上线 "微信刷掌付 "小程序,可以为用户刷掌付增加更便捷的管理方式,但刷掌付功能需要在刷掌设备上开通。刷掌付是继密码支付、指纹支付、刷脸支付之后,微信的又一新型支付方式。据悉,目前微信支付已在深圳部分商户接入刷掌付设备进行测试,用户可通过刷掌纹支付订单。刷掌纹设备由微信支付提供,设备上设有显示屏和掌纹识别区,用户开通微信刷掌纹支付功能后,只需在掌纹识别区扫描,即可完成商品支付,相比传统的密码支付和指纹支付,更加便捷。(星球科技) 微软多项云服务落户中国新数据中心 2022年10月13日,微软年度技术大会Ignite 2022和Ignite China中国技术峰会同步开启在线直播。面对中国市场日益增长的客户需求,微软宣布,Azure、Dynamics Power Platform等多项服务已在北上广三地数据中心落地,提升在中国市场的服务能力;世纪互联运营的Office 365上的Teams服务和世纪互联运营的Microsoft 365服务将于2023年上半年正式上线,为中国市场带来更全面、更优质的本地化服务体验和技术保障。 IBM宣布将红帽存储并入存储业务部 根据IBM与红帽的协议,IBM将成为Ceph基金会的主要赞助商,该基金会的成员合作推动Ceph开源项目的创新、开发、营销和社区活动。红帽OpenStack客户仍可从红帽及其合作伙伴处购买红帽Ceph存储,而拥有现有订购服务的红帽OpenShift和红帽OpenStack客户将能够在不改变与红帽关系的情况下,根据需要维护和扩展其存储足迹。 扎克伯格谈新款1万美元VR头显:成本价,我们不会像苹果那样定高价 元CEO扎克伯格在接受采访时谈到了公司新发布的Quest Pro新款VR头显的价格,他表示1499.99美元的定价只是 "性价比",让更多人通过购买硬件来体验元宇宙。扎克伯格还借此机会挖苦了竞争对手苹果公司,称苹果公司对该设备的定价 "已经到了极限"。他说:"通常,人们制造硬件,然后想从中获利。例如,苹果公司就是这样做的,制造硬件,然后尽可能多地收费。他说,公司还计划推出 Quest 3,售价在 300 美元到 500 美元之间。 智联招聘发布招聘薪资报告,第三季度全国平均薪资为10168美元/月
-
微信小程序 "轻松打卡 "的开发实践
-
微信 "扫一扫 "物联网,全面揭秘 "扫一扫 "背后的扫盲技术!-1.1 扫一扫感知物体是做什么的? 1.1 微信扫一扫是做什么的? 扫一扫识物是指以图片或视频(商品图片:鞋/包/美妆/服饰/家电/玩具/图书/食品/珠宝/家具/其他商品)为输入媒介,挖掘微信内容生态中的有价值信息(电商+百科+资讯,如图1所示),并展示给用户。这里的电商基本涵盖了微信小程序覆盖上亿SKU的全量优质电商,可以支持用户货比N家并直接下单购买,百科和资讯则聚合了微信内的头部自媒体如搜狗、搜搜、百度等,向用户展示和分享拍摄商品相关的内容资讯。 图 1 扫一扫识别功能示意图 欢迎大家更新iOS新版微信→扫一扫→识货,亲自体验,也欢迎大家通过识货界面的反馈按钮向我们提交反馈意见。 扫一扫识物实景图展示 1.2 扫一扫识物有哪些使用场景? 扫一扫识物的目的是为用户访问微信内部生态内容开辟一个新窗口,以用户扫图片为输入形式,为用户提供微信生态内容中的百科、资讯、电商等作为展示页面。除了用户熟悉的扫一扫操作外,我们还将进一步拓展长按操作,让用户更方便地进行扫一扫操作。"扫一扫知事 "的落地场景主要涵盖三大部分: a. 科普知识: a.科普知识。用户通过扫一扫,可以在微信生态圈中获取该对象的百科、资讯等常识或趣闻,帮助用户更好地了解该对象; b.购物场景。同样的搜索功能支持用户看到喜欢的商品立即检索到微信小程序电商中的同款商品,支持用户即扫即购; c.广告场景。扫一扫识别物体可以辅助公众号文章、视频更好地理解其中蕴含的图片信息,从而更好地投放匹配广告,提高点击率。 1.3 Sweep Sense 为 Sweep 家族带来了哪些新技术? 对于扫一扫来说,大家耳熟能详的应该就是扫一扫二维码、扫一扫小程序码、扫一扫条形码、扫一扫翻译了。无论是各种形式的编码还是文字字符,都可以看作是图片的一种特定编码形式,而物的识别则是对自然场景图片的识别,这对于扫一扫家族来说是一个质的飞跃,我们希望从物的识别入手,进一步拓展扫一扫对自然场景图片的理解能力,比如扫酒、扫车、扫植物、扫人脸等服务,如下图3所示。 图 3 Sweep 家族
-
微信小程序人脸识别功能(wx.faceDetect),含扫脸动画、人脸图片采集(upng.js)和位置显示-1。微信小程序人脸识别
-
如何轻松快速实现微信小程序的扫码功能