04-开发者环境搭建(下载安装开发者工具)

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排在一行*/
} --------------------------
09-表单组件
01==》按钮前面加载一个加载图标
<button loading>点击设置以上按钮plain属性</button>
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>
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>

01day-微信小程序 表单组件 动态绑定变量 导航组件 地图组件 view text button 上下滚动组件的更多相关文章

  1. 微信小程序(18)-- 自定义头部导航栏

    最近做的项目涉及相应的页面显示相应的顶部标题,所以就需要自定义头部导航了. 首先新建一个顶部导航公用组件topnav,导航高度怎么计算? 1.wx.getSystemInfo 和 wx.getSyst ...

  2. 微信小程序——表单验证插件WxValidate的二次封装(终极版)

    微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自动消失, ...

  3. 微信小程序——表单验证插件WxValidate的二次封装(二)

    在上一篇博客<微信小程序——仿jqueryValidate表单验证插件WxValidate的二次封装>中,我将WxValidate做了再次封装,简化了初始规则数据的构造,但是当有错误时页面 ...

  4. 微信小程序-表单组件

    button 按钮 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 示例代码: /** wxss **/ ...

  5. 微信小程序设置控件权重

    项目中最常用的两种布局方式,水平布局和垂直布局,在微信小程序中实现起来也比较简单.       1.横向水平布局:         实现水平布局,需要四个view容器组件,其中一个是父容器.如下: & ...

  6. 微信小程序-隐藏和显示自定义的导航

    微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同. 实现类似导航的隐藏显示,如图效果: 点击网络显示或隐藏网络中包含的内容.其他类似. 如果是jquery很方便 ...

  7. 微信小程序常用控件汇总

    1.图片标签: <image src="/images/aaa.png"></image> 2.文本标签: <text>Hello</te ...

  8. 微信小程序-表单

    wxml <view> 按钮: <button size="{{buttom.size}}" type="{{buttom.type}}" p ...

  9. 微信小程序-表单笔记

    发布页——向云端数据库上传多行文字和4张图片 第6,8行注释掉和不注释掉都可以实现数据上传 var _this = this; wx.cloud.callFunction({ name: 'searc ...

随机推荐

  1. (day51)三、ORM、路由层、版本差异、流程图

    目录 一.ORM关系建立 (一)ForeignKey(一对多) (二)ManyToManyField(多对多) (三)OneToOneField(一对一) 二.django请求生命周期流程图 三.ur ...

  2. k-means实战-RFM客户价值分群

    数据挖掘的十大算法 基本概念 导入数据集到mysql数据库中 总共有940个独立消费数据 K-Means 算法 K-Means 算法是一个聚类算法.你可以这么理解,最终我想把物体划分成 K 类.假设每 ...

  3. Linux学习笔记-第11天 特殊的RAID与LVM

    没搞清楚madam是什么意思, 这点是个疑问,其实发现书上有挺多没讲到的地方,比如LVM是不支持有些分区格式的.看来课后还是要做好细化工作.

  4. appium--python启动appium服务

    前戏 前面我们都是在cmd下通过输入appium加端口号来启动服务的,在我们做自动化的时候,我们当然不希望我们手动启动appium服务,而是希望通过脚本自动启动appium服务. 我们可以使用subp ...

  5. CCF模拟题-201909

    2.小明种苹果(续)(100分) #include<iostream> #include<cstdio> #include<cstring> #define max ...

  6. c# lock 锁

    lock语句 lock 语句获取给定对象的互斥 lock,执行语句块,然后释放 lock. 持有 lock 时,持有 lock 的线程可以再次获取并释放 lock. 阻止任何其他线程获取 lock 并 ...

  7. iOS Workflow 分享 - Scan QR Code

    很多时候我们无意识地用微信扫描一个 QR Code,然后无论打开的是什么我们用就是了.我经常会好奇到底 QR Code 编码的是什么信息,到底是一个 ID 呢,还是一个 URL(可能是 deeplin ...

  8. Unreal Engine 4 系列教程 Part 7:音频教程

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  9. Debug 路漫漫-15:Python: NameError:name 'dataset' is not defined

    在调试 <Outer Product-based Neural Collaborative Filtering>论文的源码(https://github.com/duxy-me/ConvN ...

  10. python-3-条件判断练习题

    前言 我们在前面两章学习了基础数据类型与条件判断语句,今天我们来做下练习题.如果你有不一样的解题思路在评论区亮出你的宝剑!!! 一.习题如下: 1.使用 while 循环输出 1 2 3 4 5 6 ...