自主做网站,网站后台 设计,网站建设的运用场景,想做软件去哪找软件公司微信小程序
基本结构 页面配置
页面配置
app.json 中的部分配置#xff0c;也支持对单个页面进行配置#xff0c;可以在页面对应的 .json 文件来对本页面的表现进行配置。
页面中配置项在当前页面会覆盖 app.json 中相同的配置项#xff08;样式相关的配置项属于 app.js…微信小程序
基本结构 页面配置
页面配置
app.json 中的部分配置也支持对单个页面进行配置可以在页面对应的 .json 文件来对本页面的表现进行配置。
页面中配置项在当前页面会覆盖 app.json 中相同的配置项样式相关的配置项属于 app.json 中的 window 属性但这里不需要额外指定 window 字段具体的取值和含义可参考全局配置文档中说明。
文件内容为一个 JSON 对象有以下属性
配置项
属性类型默认值描述最低版本navigationBarBackgroundColorHexColor#000000导航栏背景颜色如 #000000navigationBarTextStylestringwhite导航栏标题颜色仅支持 black / whitenavigationBarTitleTextstring导航栏标题文字内容navigationStylestringdefault导航栏样式仅支持以下值 default 默认样式 custom 自定义导航栏只保留右上角胶囊按钮。iOS/Android 微信客户端 7.0.0Windows 微信客户端不支持backgroundColorHexColor#ffffff窗口的背景色backgroundTextStylestringdark下拉 loading 的样式仅支持 dark / lightbackgroundColorTopstring#ffffff顶部窗口的背景色仅 iOS 支持微信客户端 6.5.16backgroundColorBottomstring#ffffff底部窗口的背景色仅 iOS 支持微信客户端 6.5.16enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新。 详见 Page.onPullDownRefreshonReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离单位为px。 详见 Page.onReachBottompageOrientationstringportrait屏幕旋转设置支持 auto / portrait / landscape 详见 响应显示区域变化2.4.0 (auto) / 2.5.0 (landscape)disableScrollbooleanfalse设置为 true 则页面整体不能上下滚动。 只在页面配置中有效无法在 app.json 中设置usingComponentsObject否页面自定义组件配置1.6.3initialRenderingCachestring页面初始渲染缓存配置支持 static / dynamic2.11.1stylestringdefault启用新版的组件样式2.10.2singlePageObject否单页模式相关配置2.12.0restartStrategystringhomePage重新启动策略配置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}}/viewview {{person.height}}/viewview {{person.name}}/viewview data-num自定义属性/viewviewcheckbox 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-itemitem wx:for-indexindexwx:keyid
索引{{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-itemvalue wx:for-indexkey
属性{{key}}
值{{value}}
/viewperson:{age:18,height:1.75,weight:200,name:wagn},条件渲染
11条件渲染 1 wx:if“{{true/false}}” 2 if elseif else wx:if wx:elif wx:else
view wx:if{{true}}显示/view
view wx:else{{false}}隐藏/view
view wx:elifno/viewhidden
什么场景下用哪个 1当标签不是频繁的切换显示优先使用wx:if 直接把标签从页面结构给移除掉 2当标签频繁的切换显示的时候优先使用_ hidden 通过添加样式的方式来切换显示
view hidden{{true}}134/viewviewhidden styledisplay:flex123/view
/view事件绑定
// pages/demo03/demo03.js
Page({/*** 页面的初始数据*/data: {num:0},handleinput(e){this.setData({num:e.detail.value})},handletap(e){//获取自定义属性operactionconst {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 . nume . detail. value 2 this . nume . detail . value 正确的写法 this. setData({ num:e . detail. value }) 4需要加入一个点击事件 1 bindtap 2无法在小程序当中的事件中直接传参 3通过自定义属性的方式来传递参数 4事件源中获取自定义属性
rpx
尺寸单位
拿以上的需求去实现不同宽度的页面适配 page px 750 rpx 1px750rpx/page 100px750rpx*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 interval1000 circular indicator-dotsture indicator-active-colorpinkswiper-itemimage modewidthFix src./img/lun.jpg///swiper-item
swiper-itemimage modewidthFix src./img/lun-1.png///swiper-item
swiper-itemimage modewidthFix src./img/lun-2.jpg///swiper-item
/swiper
navigator
导航组件
默认换行 open-type 有效值
navigate 有返回
redirect无返回 rich-text 富文本标签
类似v-html
nodes属性
使用
demo07.wxml
1.标签字符串
rich-text nodesimg
srchttps://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_all.p
ng alt/rich-text
2.对象数组
rich-text nodes{{nodes}}/rich-textdemo07.js
data: {nodes: [{name: div,attrs: {class: div_class,style: line-height: 60px; color: red;},children: [{type: text,text: Hellonbsp;World!}]}]}icon
view classgroupblock wx:for{{iconSize}}icon typesuccess size{{item}}//block
/view view classgroupblock wx:for{{iconType}}icon type{{item}} size40//block
/view view classgroupblock wx:for{{iconColor}}icon typesuccess size40 color{{item}}//block
/viewdata: {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’ ], },
