01day 动态绑定变量 导航组件 view text是否可以复制 button 上下滚动组件

简介: 01day 动态绑定变量 导航组件 view text是否可以复制 button 上下滚动组件

01==》


微信开发工具的下载  安装


微信小程序的工具是  下载稳定版本的


安装的时候 直接下一步就可以了


02==》


项目名陈随便输入


目录


AppID 如果你没有直接使用测试号 在左侧的开发右侧的开发设置中可以找到  你自己的appid


有就直接赋值注册的  


他们之间的区别是   测试号是不能够发布到服务器上的


05-小程序项目介绍(项目文件介绍)


XX.js是行为


XX.json  叫做配置文件


xxx.wxml叫做结构


xxx.wxss 内饰css


app.js是入口文件 不要随便去改动它


app.json  是配置项 如顶部最初的WeChat就是在这个文件中去改  它是全局最大的配置文件


微信中所有的布局都是采用flex布局的方式


要想复制text标签中的文字,必须要添加selecttable这个属性哈。


文字标签 <text></text>     text属性selectable是否可以复制文字


<text selectable>我是文字标签</text>  添加了可以复制,否者永不不能设置


容器标签 <view></view> 它相当于div


如何在page中新建页面???


首先新建==》目录==》在这个目录中新建page  


ps==>目录名和page名字一致


你新建的页面在app.json中它自动帮你配置


ps==》app.json中  谁放在最上面 随就会显示出来的注意顺序


如下 最后一个不能够加逗号隔开


"pages": [
    "pages/main/main",
    "pages/index/index",
    "pages/logs/logs"
  ],


如何使用XX.js文件中的变量  数据是在XX.js中的data中哦


<!--pages/main/main.wxml-->
<text>pages/main/main.wxml</text>
<button>{{txt}}</button>
// pages/main/main.js
  data: {
     txt:"按钮"
  },


如何你要删除某个页面,


你要到app.json去吧那个页面的配置也删除了。


06-小程序循环条件判断rpx介绍  循环  if判断


07-view组件和flex布局


view 视图容器


width:750rpx;相当于宽度100%; rpx是一个响应式的单位


https://www.cnblogs.com/wangyawei/p/9103573.html  布局方式


以下这内容不清楚  重新写一下明天


02==


css3主轴的对齐方式  两个div 竖直column  row排在一行


ps==>主轴的方式 默认竖直的


.section{
    width:750rpx;
    background: #ccc;
    display: flex;
    flex-direction:row;  /* 主轴的对齐方式  竖直column  row排在一行*/
}


02==》


在微信红如何动态绑定属性值


 <button loading="{{lodingflg}}">点击设置以上按钮plain属性</button>

 data: { lodingflg:true},


被绑定的那个值 使用mastaqi花括弧,多了一个花括弧而已


在vue中


<button loading="true">点击设置以上按钮plain属性</button>
  data:{
    loading:true,//为true 就没有那个前面那个小图标了  
  }


10-导航组件


<navigator url="/pages/index/index?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
 /pages/index/index跳转的地址
 url="/pages/index/index?title=navigate" 如何传递参数
 hover-class="navigator-hover" 按压的时候颜色发生变化


当你跳转到另外一个页面 左上角有返回的按


11-地图组件简单用法 style里面的css样式如何换行可能会报错(ps注意)


<map id="map"
longitude="113.324520"
latitude="23.099994"
scale="14"
controls="{{controls}}"
bindcontroltap="controltap"
markers="{{markers}}"
bindmarkertap="markertap"
polyline="{{polyline}}"
bindregionchange="regionchange"
show-location style="width: 100%; height: 300px;">
</map>


1425695-20191205224355416-1207602737.png


08 scrollview和text


text你可以理解为行级元素,两种或者多个text可以排列在同一行,直到这一行排不下。


超出所设置的高度  自动隐藏起来 在开发的时候有纵向滚动条  但是在真机上是没有滚动条的  所以一个一真机开发为主


<!-- 滚动 -->


style="height: 100px;超出100px有滚动条


scroll-y纵向滚动


<scroll-view scroll-y style="height: 100px;">
    <view    class="scroll-view-item ">1213</view>
    <view    class="scroll-view-item ">1313</view>
    <view   class="scroll-view-item ">1212</view>
    <view   class="scroll-view-item ">1212</view>
    <view    class="scroll-view-item ">1213</view>
    <view    class="scroll-view-item ">1313</view>
    <view   class="scroll-view-item ">1212</view>
    <view   class="scroll-view-item ">1212</view>

1425695-20191205223712704-852136097.png



相关文章
u-view使用轮播组件u-swiper不能正常显示
Swiper 轮播图 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架
1099 0
u-view使用轮播组件u-swiper不能正常显示
Element-ui 表格(Table)组件中鼠标悬停(hover)样式修改
Element-ui 表格(Table)组件中鼠标悬停(hover)样式修改
3060 0
|
JavaScript
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
2855 0
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
|
6月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
812 3
|
8月前
|
JavaScript
vue给li标签设置鼠标覆盖阴影样式
vue给li标签设置鼠标覆盖阴影样式
|
8月前
|
小程序 前端开发 定位技术
【微信小程序】-- 常用视图容器类组件介绍 -- view、scroll-view和swiper(六)
【微信小程序】-- 常用视图容器类组件介绍 -- view、scroll-view和swiper(六)
|
JavaScript
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
1736 0
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
|
8月前
【sgDragSize】自定义组件:自定义拖拽修改DIV尺寸组件,适用于窗体大小调整
【sgDragSize】自定义组件:自定义拖拽修改DIV尺寸组件,适用于窗体大小调整
|
8月前
|
JavaScript
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
|
JavaScript 编译器
【Vue】利用v-model特性封装Dialog弹窗或可编辑窗口。
【Vue】利用v-model特性封装Dialog弹窗或可编辑窗口。