舒大少博客

一个95后少年的个人博客

当前时间为:
欢迎大家来到舒大少博客https://www.9713job.com,广告合作以及淘宝商家推广请微信联系15357240395

微信小程序示例:事件传参

2022-04-21 09:52:38
swq1822677238

可以为组件通过 data-* 自定义属性传参,其中 * 代表的是参数的名字,示例

<button type=”primary” bindtap=”btnTapHeadler2″ data-info=”{{2}}”>事件传参:count+2</button>
<view>
  {{count}}
</view>
xxx.js
btnTapHeadler2(e){
    this.setData({
      count:this.data.count+ e.target.dataset.info
    })
  },

微信小程序示例:在事件处理函数中为data中的数据赋值

2022-04-21 09:36:28
swq1822677238

通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值

xxx.js
data:{
count:0
},
ChangeCount(){
this.setData({
count: this.data.count +1
})
},

xxx.wxml

<view>
  {{count}}
</view>

微信小程序示例:bindtap语法格式

2022-04-21 09:29:12
swq1822677238
<button type=”primary” bindtap=”btnTapHeadler”>按钮</button>
xxx.js
btnTapHeadler(e){
    console.log(e);
  },

微信小程序示例:数据绑定

2022-04-21 09:11:35
swq1822677238

mustache语法

在 data里 info:’hello world’

<view>
  {{info}}
</view>
三元表达式
randomNum: Math.random()* 10
<view>
  {{randomNum >5?’选项A’:’选项B’}}
</view>

微信小程序示例:其他组件

2022-04-21 08:57:12
swq1822677238
<button>默认按钮</button>
<button type=”primary”>主色调按钮</button>
<button type=”warn”>警告按钮</button>
<button size=”mini”>默认按钮</button>
<button type=”primary” size=”mini”>主色调按钮</button>
<button type=”warn” size=”mini”>警告按钮</button>
<button size=”mini” plain>默认按钮</button>
<button type=”primary” size=”mini” plain>主色调按钮</button>
<button type=”warn” size=”mini” plain>警告按钮</button>

image组件的基本使用
<image src=”url”></image>

image组件的mode属性
image组件的mode属性用来指定图片的裁剪和缩放模式,常用的mode属性值如下:

微信小程序示例:text组件

2022-04-21 08:48:17
swq1822677238
长按选中文本效果
<view>
  <text selectable>15357240395</text>
</view>
<!– rich-text –>
<rich-text nodes=”<h2 style=’color:red’>标题</h2>”></rich-text>

微信小程序示例:swiper轮播图

2022-04-21 08:33:37
swq1822677238

xxx.wxml

<!– 轮播图结构 –>
<swiper class=”swiper-container”>
  <!– 第一个轮播图 –>
  <swiper-item>
    <view class=”item”>A</view>
  </swiper-item>
  <!– 第二个轮播图 –>
  <swiper-item>
    <view class=”item”>B</view>
  </swiper-item>
  <!– 第三个轮播图 –>
  <swiper-item>
    <view class=”item”>C</view>
  </swiper-item>
</swiper>
/* 轮播图 */
.swiper-container{height: 150px;}
.item{height: 100%;line-height: 150px;text-align: center;}
swiper-item:nth-child(1){background: lightgreen;}
swiper-item:nth-child(2){background: lightskyblue;}
swiper-item:nth-child(3){background: lightpink;}
常用属性
<swiper class=”swiper-container” indicator-dots indicator-active-color=”white” indicator-color=”gray”
circular autoplay>

微信小程序示例:scroll-view 竖向横向布局

2022-04-21 08:16:18
swq1822677238

xxx.wxml

<scroll-view class=”container2″ scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>
xxx.wxss
/*scroll-view 竖向滚动*/
.container2{border: 1px solid blue;margin-bottom: 20px;width: 100px;height: 120px;}
.container2 view{width: 100px;height: 100px;text-align: center;line-height: 100px;}
.container2 view:nth-child(1){background: red}
.container2 view:nth-child(2){background: orange}
.container2 view:nth-child(3){background: green}

微信小程序示例:实现flex横向布局

2022-04-21 08:04:03
swq1822677238
<!– 实现flex横向布局 –>  xxx.wxml
<view class=”container1″>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

xxx.wxss

/* 分散对齐 justify-content: space-around; */
.container1{display: flex;justify-content: space-around;}
.container1 view{width: 100px;height: 100px;text-align: center;line-height: 100px;}
.container1 view:nth-child(1){background: red}
.container1 view:nth-child(2){background: orange}
.container1 view:nth-child(3){background: green}

文件上传

2022-04-20 20:06:39
swq1822677238
public String realPath(String path){
    SimpleDateFormat y=new SimpleDateFormat("yyyy");
    SimpleDateFormat m=new SimpleDateFormat("MM");
    SimpleDateFormat d=new SimpleDateFormat("dd");
    Date date=new Date(System.currentTimeMillis());
    String year = y.format(date);
    String month = m.format(date);
    String day = d.format(date);
    String realPath=path+ File.separator+year+File.separator+month+File.separator+day;
    File file=new File(realPath);
    if(!file.exists()) file.mkdirs();
    return realPath;
}
public String newFilename(String username,String filename){
    Date date=new Date();
    SimpleDateFormat time=new SimpleDateFormat("yyyyMMddHHmmss");
    String times = time.format(date);
    return times+"_"+username+"_"+filename;
}
// 单文件上传
@RequestMapping("/upload")
public String upload(HttpServletRequest request, HttpServletResponse response) throws Exception{
    request.setCharacterEncoding("utf-8");
    response.setCharacterEncoding("utf-8");
    response.setContentType("text/html;charset=utf-8");

    Part part = request.getPart("file");

    String realPath = request.getServletContext().getRealPath("/WEB-INF/upload");
    String s = realPath(realPath);

    // 判断上传目录是否存在,如果不存在则创建反之直接存
    File file1=new File(s);
    if(!file1.exists())file1.mkdirs();

    part.write(s+File.separator+newFilename(null,part.getSubmittedFileName()));

    String newFileName=s+File.separator+newFilename(null,part.getSubmittedFileName());

    response.getWriter().print(part.getSubmittedFileName()+"上传成功");

    request.setAttribute("filename",newFileName);

    return "/admin/lunboForm";
}

springboot分页

2022-04-18 19:32:32
swq1822677238

Springboot版本

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.2.6.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>

依赖

<!--分页助手-->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.3.0</version>
</dependency>

控制层

// 帖子管理
@RequestMapping("/posts")
public String posts(String pageIndex,String pageSize,HttpServletRequest request){
    // 判断页码和页大小
    int pageNum=0,pageSizes=0;
    if(pageIndex==null)pageNum=1;
    else pageNum=Integer.parseInt(pageIndex);
    if(pageSize==null)pageSizes=10;
    else pageSizes=Integer.parseInt(pageSize);

    BbsPostMapper postMapper = ss.getMapper(BbsPostMapper.class);
    // 设置分页
    PageHelper.startPage(pageNum,pageSizes);
    // 查询所有
    List<BbsPost> bbsPost = postMapper.getAllBbsPost2();

    BbsItemMapper itemMapper = ss.getMapper(BbsItemMapper.class);
    HashSet<BbsItem> itemHashSet=new HashSet<>();
    // 封装数据
    PageInfo<BbsPost> pageInfo=new PageInfo<>(bbsPost);

    for (BbsPost bbsPosts : pageInfo.getList()) {
        BbsItem bbsItem = itemMapper.selectByPrimaryKey(bbsPosts.getItemid());
        itemHashSet.add(bbsItem);
    }
    request.setAttribute("itemHashSet",itemHashSet);
    request.setAttribute("bbsPost",bbsPost);
    request.setAttribute("pageInfo",pageInfo);
    return "admin/posts";
}

页面分页

<div class="pages">
    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
            <li class="page-item">
                <a class="page-link" href="/bbsServer/posts">首页</a>
            </li>
            <c:if test="${requestScope.pageInfo.isFirstPage!=true}">
                <li class="page-item">
                    <a class="page-link" href="/bbsServer/posts?pageIndex=${requestScope.pageInfo.prePage}">上一页</a>
                </li>
            </c:if>
            <c:forEach var="i" begin="1" end="${requestScope.pageInfo.pages}" >
                <li class="page-item">
                    <a class="page-link" href="/bbsServer/posts?pageIndex=${i}">${i}</a>
                </li>
            </c:forEach>
            <c:if test="${requestScope.pageInfo.isLastPage!=true}">
                <li class="page-item">
                    <a class="page-link" href="/bbsServer/posts?pageIndex=${requestScope.pageInfo.nextPage}">下一页</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="/bbsServer/posts?pageIndex=${requestScope.pageInfo.navigateLastPage}">尾页</a>
                </li>
            </c:if>
            <li class="page-item">
                <a class="page-link">共计${requestScope.pageInfo.total} 条数据</a>
            </li>
        </ul>
    </nav>
</div>

微信小程序之WXML模板语法事件绑定

2022-04-14 19:56:52
swq1822677238
  1. 什么是事件
    事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
  2. 小程序中常用的事件 (更多…)

微信小程序之WXML模板语法的数据绑定

2022-04-14 19:39:58
swq1822677238
  1. 数据绑定的基本原则
    1. 在data中定义数据
    2. 在WXML中使用数据
  2. 在data中定义页面的数据
    在页面对应的.js文件中,数据定义到data对象中即可。
  3. Mustache 语法的格式
    在data中的数据绑定到页面中渲染,使用Mustache 语法(双大括号)将变量名包起来即可。语法格式如下: (更多…)

微信小程序之小程序API

2022-04-14 19:25:17
swq1822677238
  1. 小程序API概述
    小程序中的API是由宿主环境提供的,通过这些丰富的小程序API,开发者可以方便的调用微信提供的能力,例如:获取用户信息,本地存储,支付功能等。
  2. 小程序API的3大分类
    小程序官方把api分为了如下3大类:
    1. 事件监听api:
    特点:以on开头,用来监听某些事件的触发。
    举例:wx.onWindowResize(function callback)监听窗口尺寸变化的事件
    2. 同步api
    特点1:以Sync结尾的api都是同步api
    特点2:同步api的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
    举例:wx.setStorageSync(‘key’,’value’)向本地存储中写入内容
    3. 异步api
    特点:类似于jQuery中的$.ajax(options)函数,需要通过success、fail、complete接收调用的结果
    举例:wx.request() 发起网络请求,通过success 回调函数接收数据

微信小程序之小程序组件

2022-04-14 19:13:17
swq1822677238
  1. 小程序中组件的分类
    小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。
    官方把小程序的组件分为9大类,分别是:
    1. 视图容器、2. 基础内容、3.表单组件、4.导航组件、5.媒体组件、6.map地图组件、7.canvas画布组件、8.开放能力、9.无障碍访问
  2. 常用的视图容器类组件
    1. view:普通视图区域、类似于HTML中的div,是一个块级元素,常用来实现页面的布局效果
    2. scroll-view:可滚动的视图区域,常用来实现滚动列表效果 (更多…)

微信小程序之过程

2022-04-14 17:59:46
swq1822677238
  1. 小程序启动的过程
    1. 把小程序的代码包下载到本地
    2.解析 app.json 全局配置文件
    3. 执行 app.js 小程序入口文件,调用 App()创建小程序实例
    4. 渲染小程序首页
    5. 小程序启动完成
  2. 小程序页面渲染的过程
    1. 加载解析页面的 .json配置文件
    2. 加载页面的 .wxml 模板 和 .wxss 样式
    3. 执行页面的.js文件,调用 Page()创建页面实例
    4. 页面渲染完成

微信小程序之小程序的宿主环境及通信模型

2022-04-14 09:51:55
swq1822677238
    1. 什么是宿主环境
      宿主环境(host environment)指的是程序运行所必须的依赖环境。
      例如:安卓系统 和 iOS系统 是两个不同的宿主环境。
      安卓版的微信app是不能在ios环境下运行的,所以安卓是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的
    2. 小程序的宿主环境
      手机微信是小程序的宿主环境。
      小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,例如:
      微信扫码,微信支付、微信登录、地理定位、etc等等
    3. 小程序宿主环境包含的内容
      1. 通信模型、2.运行机制、3.组件、4. api

(更多…)

微信小程序之js逻辑交互

2022-04-14 09:32:25
swq1822677238
  1. 小程序中的 .js文件
    一个项目仅仅提供界面展示是不够的,在小程序中,我们通过.js文件来处理用户的操作。
    例如:响应用户的点击、获取用户的位置等等。
  2. 小程序中 .js文件的分类
    1. app.js:是整个小程序项目的入口文件,通过调用 APP() 函数来启动整个小程序
    2. 页面的 .js 文件:是页面的入口文件,通过调用 Page() 函数来创建并运行页面
    3. 普通的 .js 文件:是普通的功能模块文件,用来封装公共的函数或属性供页面使用

微信小程序之WXML模板

2022-04-14 09:27:16
swq1822677238
  1. 什么是WXML
    WXML(WeiXin Markup Language)是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的HTML。
  2. WXML 和 HTML 的区别
    1. 标签名称不同
    HTML(div,span,img,a)
    WXML(view,text,image,navigator)
    2. 属性节点不同
    <a href=”#”>超链接</a>
    <navigator url=”/pages/home/home”></navigator>
    3. 提供了类似于 Vue 中的模板语法 (更多…)

微信小程序之json配置文件

2022-04-14 09:11:19
swq1822677238
  1. json配置文件的作用
    json是一种数据格式,在实际开发中,json总是以配置文件的形式出现,小程序项目中也不例外:通过不同的.json配置文件,可以对小程序项目进行不同级别的配置。
    小程序项目中有4种json配置文件,分别是:
    1. 项目根目录中的 app.json 配置文件
    2. 项目根目录中的 project.config.json 配置文件
    3.项目根目录中的 sitemap.json 配置文件
    4.每个页面文件夹中的 .json 配置文件
  2.  app.json 文件
    app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。app.json 配置文件内容如下: (更多…)