可以为组件通过 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
})
},
通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值
xxx.js
data:{
count:0
},
ChangeCount(){
this.setData({
count: this.data.count +1
})
},
xxx.wxml
<view>
{{count}}
</view>

<button type=”primary” bindtap=”btnTapHeadler”>按钮</button>
xxx.js
btnTapHeadler(e){
console.log(e);
},
mustache语法
在 data里 info:’hello world’
<view>
{{info}}
</view>
三元表达式
randomNum: Math.random()* 10
<view>
{{randomNum >5?’选项A’:’选项B’}}
</view>
<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属性值如下:
长按选中文本效果
<view>
<text selectable>15357240395</text>
</view>
<!– rich-text –>
<rich-text nodes=”<h2 style=’color:red’>标题</h2>”></rich-text>

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>

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横向布局 –> 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}

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版本
<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>
- 什么是事件
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
- 小程序中常用的事件 (更多…)
- 数据绑定的基本原则
1. 在data中定义数据
2. 在WXML中使用数据 - 在data中定义页面的数据
在页面对应的.js文件中,数据定义到data对象中即可。
- Mustache 语法的格式
在data中的数据绑定到页面中渲染,使用Mustache 语法(双大括号)将变量名包起来即可。语法格式如下: (更多…)
- 小程序API概述
小程序中的API是由宿主环境提供的,通过这些丰富的小程序API,开发者可以方便的调用微信提供的能力,例如:获取用户信息,本地存储,支付功能等。 - 小程序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 回调函数接收数据
- 小程序中组件的分类
小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。
官方把小程序的组件分为9大类,分别是:
1. 视图容器、2. 基础内容、3.表单组件、4.导航组件、5.媒体组件、6.map地图组件、7.canvas画布组件、8.开放能力、9.无障碍访问 - 常用的视图容器类组件
1. view:普通视图区域、类似于HTML中的div,是一个块级元素,常用来实现页面的布局效果
2. scroll-view:可滚动的视图区域,常用来实现滚动列表效果 (更多…)
- 小程序启动的过程
1. 把小程序的代码包下载到本地
2.解析 app.json 全局配置文件
3. 执行 app.js 小程序入口文件,调用 App()创建小程序实例
4. 渲染小程序首页
5. 小程序启动完成 - 小程序页面渲染的过程
1. 加载解析页面的 .json配置文件
2. 加载页面的 .wxml 模板 和 .wxss 样式
3. 执行页面的.js文件,调用 Page()创建页面实例
4. 页面渲染完成
-
- 什么是宿主环境
宿主环境(host environment)指的是程序运行所必须的依赖环境。
例如:安卓系统 和 iOS系统 是两个不同的宿主环境。
安卓版的微信app是不能在ios环境下运行的,所以安卓是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的 - 小程序的宿主环境
手机微信是小程序的宿主环境。
小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,例如:
微信扫码,微信支付、微信登录、地理定位、etc等等 - 小程序宿主环境包含的内容
1. 通信模型、2.运行机制、3.组件、4. api
- 什么是宿主环境
- 小程序中的 .js文件
一个项目仅仅提供界面展示是不够的,在小程序中,我们通过.js文件来处理用户的操作。
例如:响应用户的点击、获取用户的位置等等。 - 小程序中 .js文件的分类
1. app.js:是整个小程序项目的入口文件,通过调用 APP() 函数来启动整个小程序
2. 页面的 .js 文件:是页面的入口文件,通过调用 Page() 函数来创建并运行页面
3. 普通的 .js 文件:是普通的功能模块文件,用来封装公共的函数或属性供页面使用
- 什么是WXML
WXML(WeiXin Markup Language)是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的HTML。 - 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配置文件的作用
json是一种数据格式,在实际开发中,json总是以配置文件的形式出现,小程序项目中也不例外:通过不同的.json配置文件,可以对小程序项目进行不同级别的配置。
小程序项目中有4种json配置文件,分别是:
1. 项目根目录中的 app.json 配置文件
2. 项目根目录中的 project.config.json 配置文件
3.项目根目录中的 sitemap.json 配置文件
4.每个页面文件夹中的 .json 配置文件 - app.json 文件
app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。app.json 配置文件内容如下: (更多…)