• 微信小程序（一）

     WebView app.是全局配置，app.json是全局配置文件，在页面的.json配置文件中的配置会覆盖我们全局的配置

    快捷键： .box 敲回车 -----  

                    .row*8 敲回车：

             .row{$}*8 敲回车

    案例1：

    .wxss:

    1. .box{
    2.   color: red;
    3.   border:3px solid rgb(196, 240, 196);
    4. }

    .wxml:

        <view class = "box">跟我一起学小程序view>

    案例2：

    px和rpx的差异：

    px单位是固定大小不会随着屏幕的改变而改变，rpx是响应式布局：

    案例3：

     .wxml:         hover-stop-propagation：子元素阻止父元素冒泡

    1. <view class="box" hover-class="boxhover" hover-start-time="0" hover-stay-time="200">
    2.   王婆卖瓜 
    3.   <view class = "inner" hover-class="innerhover" hover-stop-propagation = "true">
    4.      老王卖鱼
    5.   view>
    6. view>
    7. <view>11111view>
    8. <view>22222view>
    9. <text user-select>33333text>
    10. <text>44444text>
    11. <text user-select >55555text>
    12. <view>-----------view>
    13. <text space="ensp" >6 6  6  6   6text>
    14. <view>-----------view>
    15. <text space="emsp" >6 6  6  6   6text>
    16. <view>-----------view>
    17. <text space="nbsp" >6 6  6  6   6text>
    18. <view>-----------view>
    19. <text decode >< 77777text><view>-----------view>
    20. <text  >< 77777text>
    21. <view>
    22.   <icon type ="warn" size="100" color="pink">icon>
    23.   <icon type ="waiting" size="50">icon>
    24. view>
    25. <view>
    26.   <progress percent= "30" show-info border-radius="100" stroke-width="10">progress>
    27. view>

    .wxss:

    1. .box{
    2.   width:200px;
    3.   height:200px;
    4.   background: red;
    5. }
    6.  
    7. .boxhover{
    8.   background: palegreen;
    9. }
    10.  
    11. .box .inner{
    12.   width:80px;
    13.   height:80px;
    14.   background: palevioletred;
    15.  
    16. }
    17. .inner.innerhover{
    18.   background: seashell;
    19. }
     案例4：scroll-view

    没有之前：

    竖向滚动：

     .wxml:   

    1. <scroll-view class = "myScroll" scroll-y>
    2.   <view class="row">1view>
    3.   <view class="row">2view>
    4.   <view class="row">3view>
    5.   <view class="row">4view>
    6.   <view class="row">5view>
    7.   <view class="row">6view>
    8.   <view class="row">7view>
    9.   <view class="row">8view>
    10. scroll-view>

    .wxss:

    1. .myScroll{
    2.   width: 100%; /*沾满整个屏幕 */
    3.   height:500rpx;
    4.   background: #eeeeee;
    5. }
    6.  
    7. .myScroll .row{
    8.   width: 220rpx;
    9.   height:220rpx; 
    10.   background: palegreen;
    11.   margin-bottom: 10rpx; /* 每个容器底部间距10rpx */
    12. }
     横向滚动：

             强制一行然后实现滚动效果：

      /*1、把子容器排成一行， 如果只有inline的话，width、height就不起作用了 */

              display: inline-block; 

     /*2、强制让子元素挤在一行*/

             white-space: nowrap;

    wxml:

    1. <scroll-view class = "myScroll" scroll-x>
    2.   <view class="row">1view>
    3.   <view class="row">2view>
    4.   <view class="row">3view>
    5.   <view class="row">4view>
    6.   <view class="row">5view>
    7.   <view class="row">6view>
    8.   <view class="row">7view>
    9.   <view class="row">8view>
    10. scroll-view>

     wxss：

    1. .myScroll{
    2.   width: 100%; /*沾满整个屏幕 */
    3.   height:500rpx;
    4.   background: #eeeeee;
    5.    /*2、强制让子元素挤在一行*/
    6.    white-space: nowrap;
    7. }
    8.  
    9. .myScroll .row{
    10.   width: 220rpx;
    11.   height:220rpx; 
    12.   background: palegreen;
    13.   /*1、把子容器排成一行， 如果只有inline的话，width、height就不起作用了 */
    14.   display: inline-block; 
    15.   margin-right: 10rpx;  
    16.    
    17. }  
    18.    /* 每个元素都有10间隔 最后一个元素不需要有间隔:*/
    19. .myScroll .row:last-child{
    20.   margin-right: 0;
    21. }
    案例5：movable-area自由移动 

            拖动图形验证功能可以使用这个实现

    、 必须联合使用， 才是可移动区域

    • movable-area 必须设置width和height属性，不设置默认为10px**
    • 当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；
    • 当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area
    属性类型默认值必填说明
    directionstringnone否

    movable-view的移动方向，

    属性值有all、vertical、horizontal、none

    inertiabooleanfalse否movable-view是否带有惯性
    out-of-boundsbooleanfalse否超过可移动区域后，movable-view是否还可以移动

     .wxml:

    1. <movable-area style="width: 400rpx;height:400rpx;background:#ccc; overflow: hidden;">
    2.   
    3.   <movable-view direction="all" inertia x="20rpx" y="20rpx" out-of-bounds
    4.     style="width: 150rpx;height: 150rpx;background: green;"
    5.   >
    6.     <view>helloview>
    7.   movable-view>
    8. movable-area>

    案例6：navigator页面链接导航
    1.  
    2. <navigator url = "/pages/index/index" hover-class="hoverNav">这是跳转到index页面navigator>
    3.  
    4. <navigator url = "/pages/index/index" class="out" hover-class="hoverNav">
    5.   <image src="/static/pic2.png" mode="aspectFit" class="image">image>
    6. navigator>
    7.  
    8. <navigator url = "/pages/index/index"  >
    9.  <view>这是页面跳转view>>
    10. navigator>

    1. .out .image{
    2.   width: 200rpx;
    3.   height: 200rpx;
    4. }
    5.  
    6. .hoverNav{
    7.   color: aquamarine;
    8.   background:rgb(248, 52, 101);
    9. }

    相对路径 退出两层 ../../

    /代表根目录

    案例7：app.js

    app.js是全局配置文件：

    用的比较多的是globalData全局变量：

    看控制台：

     如何修改全局变量的值呢：

     案例8：data差值表达式:
               1、两个花括号！！！！

    1. <view>
    2.   我的名字是：{{myName}}
    3. view>
    2、设置一个定时器，在页面加载完成2s后修改值：
    1. Page({
    2.   /**
    3.    * 页面的初始数据，我们要在页面中显示的所有数据都是放在data中
    4.    */
    5.   data: {
    6.       myName:"张三三"
    7.   },
    8.  
    9.   /**
    10.    * 生命周期函数--监听页面加载
    11.    * onLoad函数是页面加载完成后要执行的函数
    12.    */
    13.   onLoad(options) {
    14.       setTimeout(()=>{
    15.         this.setData({
    16.           myName:"李想想"
    17.         })
    18.       },2000)
    19.   },
    3、取值：

    wxml:

    1. <view>
    2. 我的名字是：{{myName}}
    3. view>
    4. <view>
    5. 年龄：{{age}}
    6. view>
    7. <veiw>
    8. 书籍：{{books}}
    9. veiw>
    10. <view>
    11. 用户：{{user}}
    12. view>
    13. <view>
    14. 用户：{{user.name}}-{{user.age}}-{{user.gender}}
    15. view>
    16. <view>    
    17. 用户：{{user.name + "-" +user.age+"-"+user.gender}}
    18. view>

    .js:

    1. Page({
    2.   /**
    3.    * 页面的初始数据，我们要在页面中显示的所有数据都是放在data中
    4.    */
    5.   data: {
    6.       myName:"张三三",
    7.       age:18,
    8.       bool:true,
    9.       books:["孙子兵法","红楼梦"],
    10.       user:{
    11.         name:"高齐强",
    12.         age:50,
    13.         gender:"男"
    14.       }
    15.   },
    4、if elif else

    true和false必须放在差值表达式中

    1. <view wx:if="{{true}}">
    2.   用户1：{{user.name}}-{{user.age}}-{{user.gender}}
    3. view>
    4.  
    5. <view wx:if="{{false}}">
    6.   用户2：{{user.name}}-{{user.age}}-{{user.gender}}
    7. view>
    8.  
    9. <view wx:if="{{1==1}}">
    10.   用户3：{{user.name}}-{{user.age}}-{{user.gender}}
    11. view>
    12.  
    13. <view wx:if="{{bool}}">
    14.   用户4：{{user.name}}-{{user.age}}-{{user.gender}}
    15. view>
    16.  
    17. <view wx:if="{{!bool}}">
    18.   用户5：{{user.name}}-{{user.age}}-{{user.gender}}
    19. view> 
    20. <view wx:else>
    21.   用户6：{{user.name}}-{{user.age}}-{{user.gender}}
    22. view>
    23.  
    24. <view wx:if="{{age==15}}">年龄15岁view>
    25. <view wx:elif="{{age==16}}">年龄16岁view>
    26. <view wx:elif="{{age==17}}">年龄17岁view>
    27. <view wx:elif="{{age==18}}">年龄18岁view>
    28. <view wx:elif="{{age==19}}">年龄19岁view>
    29. <view wx:else>年龄无效值view>

    案例9:for循环列表渲染
    案例1：
    1. data: {
    2.       myName:"张三三",
    3.       age:18,
    4.       bool:true,
    5.       books:["孙子兵法","红楼梦","青年文摘","新闻报道"],
    6.       user:{
    7.         name:"高齐强",
    8.         age:50,
    9.         gender:"男"
    10.       }
    11.   },
    2. <view wx:for="{{books}}" wx:for-item="item">
    3.     书名：{{item}}
    4. view>
    5.  
    6. <view wx:for="{{books}}" wx:for-item="row">
    7.     书名：{{row}}
    8. view>
    9.  
    10. <view wx:for="{{books}}"  >
    11.     书名：{{item}}
    12. view>
                    
    案例2：index索引值
    1. <view wx:for="{{books}}"  >
    2.     书名：{{index}}  -  {{item}}
    3. view>  
    4. <view wx:for="{{books}}" wx:for-index="index">
    5.     书名：{{index+1}}-{{item}}
    6. view>

     案例3：循环对象
    1. <view class = "article" wx:for="{{articles}}">
    2.   <image src="{{item.picUrl}}" mode="aspectFit" />
    3.   <view class = "title">
    4.     {{item.title}}
    5.   view>
    6.   <text class = "time" > {{item.time}}text>
    7. view>
    1. Page({
    2.  
    3.   /**
    4.    * 页面的初始数据
    5.    */
    6.   data: {
    7.       articles:[{
    8.         title:"JS时间戳转为时间格式的多功能方法",
    9.         time:"2023-01-10",
    10.         picUrl:"http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20200611/1591843113.jpg"
    11.       },{
    12.         title:"WXS根据时间戳计算时间间隔",
    13.         time:"2020-04-25",
    14.         picUrl:"http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20200425/1587812172.jpg"
    15.       },{
    16.         title:"微信小程序wxs时间戳格式化多功能转换方法",
    17.         time:"2020-03-29",
    18.         picUrl:"http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20200329/1585485379.jpg"
    19.       },{
    20.         title:"移动端rem与px单位转换响应式适配的方法",
    21.         time:"2020-03-26",
    22.         picUrl:"http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20200326/1585201323.jpg"
    23.       }]
    24.   },

    案例10：bindtap事件触发

    事件分类，事件分为冒泡事件和非冒泡事件：

    1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
    2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

    WXML的冒泡事件列表：

    类型触发条件
    touchstart手指触摸动作开始
    touchmove手指触摸后移动
    touchcancel手指触摸动作被打断，如来电提醒，弹窗
    touchend手指触摸动作结束
    tap手指触摸后马上离开（这个用的比较多，类似于click点击事件）
     案例1：

    .js:

    1. // pages/event/event.js
    2. Page({
    3.  
    4.   /**
    5.    * 页面的初始数据
    6.    */
    7.   data: {
    8.         myName:"咸鱼本鱼",
    9.         age:18
    10.   },
    11.  
    12.   onClickNow(){
    13.       console.log("点击了block块");
    14.       this.setData({
    15.         myName : "基尼太美",
    16.         age:66
    17.       })
    18.   },

    .wxml:

    1. <text>pages/event/event.wxmltext>
    2. <view class= "block" bindtap="onClickNow">
    3.     点击我改变姓名
    4. view>
    5.  
    6. <view class = "text">
    7.     姓名：{{myName}} 年龄：{{age}}
    8. view>

    .wxss:

    1. .block{
    2.     width: 300rpx;
    3.     height: 100rpx;
    4.     background-color: aquamarine;
    5.     font-size:40rpx;
    6. }
    7.  
    8. .text{
    9.   font-size: 60rpx;
    10. }

                    

     案例2：带有参数的点击事件：

    .wxml:

    1. <text>pages/event/event.wxmltext>
    2. <view class= "block" data-myname="张三" data-myage="26" bindtap="onClickNow">
    3.     点击我改变姓名
    4. view>
    5.  
    6. <view class = "text">
    7.     姓名：{{myName}} 年龄：{{age}}
    8. view>

    .js:

    1. Page({
    2.  
    3.   /**
    4.    * 页面的初始数据
    5.    */
    6.   data: {
    7.         myName:"咸鱼本鱼",
    8.         age:18
    9.   },
    10. /* 这个event其实是个对象*/
    11.   onClickNow(event){ 
    12.       console.log("点击了block块");
    13.       console.log(event);
    14.       console.log(event.currentTarget.dataset.myname);
    15.       console.log(event.currentTarget.dataset.myage);
    16.       this.setData({
    17.         myName : event.currentTarget.dataset.myname,
    18.         age:event.currentTarget.dataset.myage
    19.       })
    20.   },

    .wxss:

    1.  
    2. .block{
    3.     width: 300rpx;
    4.     height: 100rpx;
    5.     background-color: aquamarine;
    6.     font-size:40rpx;
    7. }
    8.  
    9. .text{
    10.   font-size: 60rpx;
    11. }

                    

     案例3：

  • 相关阅读:
    Towhee 每周模型
    三维模型3DTile格式轻量化压缩在移动智能终端应用方面的重要性分析
    python 爬虫的开发环境配置
    网络安全（黑客）自学
    Python中基于Socket实现服务器端和客户端之间的通信
    SpringBoot2.0---------------4、SpringBoot底层注解之配置绑定
    1、年千亿营收企业Java研发人员日常使用Linux命令总结
    【Linux】【网络】传输层协议：TCP
    【第四章】详解Feign的实现原理
    计算机毕业设计ssm飞机售票管理系统63z52系统+程序+源码+lw+远程部署
  • 原文地址：https://blog.csdn.net/weixin_53676834/article/details/136651013