微信小程序

微信公众平台–小程序–不同类型文件-wxml

小程序中wxml是一种非常严格xml文件类型
严格:
-所有标签要求开始必须有结束 ```<text></text> ```
-属性必须双引号    ```<text id="btn1"></text> ```

小程序wxml常用标签	相当于
<view></view>	<div></div>
<text></text>	<span></span><p></p>
<image></image>	<img src="" />
<form></form>	<form></form>
<navigator></navigator>	<a></a>

#小程序运行自动化操作,在运行时自动将组件
其它部分 js/wxss/自动加载到当前 wxml文件
#小程序不需要引入与组件同名js文件

微信公众平台–小程序–image

-image默认大小 320*240
-图片路径 <image src="图片路径" />
(1)本地绝对路径 /pages/img/1.jpg ok
(2)本地相对路径 …/img/1.jpg error
(3)网络绝对路径 http://127.0.0.1:3000/1.jpg
-图片属性
(1)lazy-load 懒加载<image lazy-load="true" />
软件开发中 懒(提升效率,健状性)
<image src="{{img}}" lazy-load="true" />
img ajax请求获取
(2)mode
aspectFill 等比例显示图片以短边为准
aspectFit 等比例显示图片以长边为准
标准写法:
<image src="http://127.0.0.1:3000/1.jpg" lazy-load="true" mode="aspectFill"/>

微信公众平台–小程序–text

属性
selectable false 文本内容是否可以选中复制
decode false 是否是文本编码

微信公众平台–小程序-js

小程序每个组件对应一个.js文件
Page() 当前组件对象
Page({data:{},onload:function(){…}})
小程序js区别
-ECMAScript
-基于类型:number;string;boolean;null;undefined
-引入:Object;Date;Math;…
-自定义对象
-DOM/BOM 没有
-小程序有顶级对象 wx(类似window)

微信公众平台–小程序-css(wxss)

wxss 微信样式文件

-新特性一:rpx(r响应式px像素)
前端开始流程
(1)设计师ps创建手机效果图-切片(图片) 物理像素
(2)前端:创建静态网页(html,css,js,vue) 逻辑像素

物理像素=逻辑像素dpr
dpr iphone6 dpr 2
iphone6plus dpr 3
示例:物理像素 750 = 3752

小程序:物理像素 750 = 750rpx;
-新特性二:@import
@import “引其它样式文件”

微信js

-js ECMA
-js DOM/BOM 不可以使用
-js wx 顶级对象
-每个组件 Page({data:{},onload:function()})
data:{}在模板中显示数据
data:{msg:“hello”}
<view>{{msg}}</view>

js 获取data中数据如何修改data中数据

    data{msg:"hello"}
    -获取  this.data.数据属性名
    示例:  this.data.msg;                  ok
    -修改  this.setData({数据属性名:新值})
    示例:  this.setData({msg:"东东"})        ok

微信小程序–组件生命周期-(重点)

组件生命周期:一个组件从开始创建到使用至销毁过程
-onLoad 组件创建成功并且加载完成(内存)触发一次
*在此事件中发送ajax请求
*获取其它组件传递给当前组件参数
onLoad(options){}
-onReady 组件初始化渲染(数据模板绑定)完成触发一次
-onShow 显示组件;前台(显示)后切换(隐藏)
-onHide 隐藏组件;前台后切换
-onUnload 组件卸载(将组件移出内存)
示例:小程序从一个组件 a --跳转–>另一个组件 b
wx.redirectTo({url:"/pages/index/index"})
exam02 --跳转–>另一组件 index

微信小程序–组件–特殊事件

-onPullDownRefresh 用户下拉操作
#注意事项:
#默认小程序禁止用户下拉操作
#允许用户下拉操作
(1)全局允许所有组件用户可以下拉操作 app.json
“window”: {
“enablePullDownRefresh”: true,
}
(2)当前组件允许用户下拉操作 exam02.json
{“enablePullDownRefresh”: true}
-onReachBottom 用户上拉触顶
-onPageScroll(opt) 用户滑动操作
opt.scrollTop 页面垂直方向己经滚动距离

微信小程序—配置文件 json

json:语言特别严格，没有注释
-全局配置文件 app.json
pages:[] 保存组件路径列表
window: 窗口样式
tabbar: 底部导航条
-pages:组件列表，默认显示第一位组件
-window:窗口样式
“navigationBarBackgroundColor”: “#f00” 顶部背景样式
“navigationBarTitleText”: “学子商城”, 顶部导航文本
“navigationBarTextStyle”: “black” 顶部导航文本样式
#文本样式black/white
-当前组件配置文件 exam02.json
#配置文件有"就近原则"
#如果全局与局部配置有重复，局部优先级高

-tabbar app.json
“tabBar”:{
“list”:[
{ //底部导航条内容(图片;文字)
“pagePath”:“组件路径”, //json 不用加/
“text:”", //按钮文字
“iconPath”:"", //默认图片
“selectedIconPath”:"" //选中图片
}
]
}
#组件路径不加 /
#图片路径不支持网络只支持本地
#pagePath：组件路径一定在 pages:[]
#哪些组件可以显示tabbar 完整列表,当组件添加tabbar
到中,此组件可以显示tabbar显示
#如果当前组件定义tabbar中,缺点
使用 wx. redirectTo({url:“组件路径”})
不能跳转成功
常见错误
(1) list中对象最少有2个
(2)tabBar.list[0].iconPath 文件不存在

微信小程序—学子商城-功能一:首页

(1)创建新项目 xz_app_00
(2)修改 index组件
(3)顶部导航栏 #ff6600 学子商城
(4)创建轮播图 位置
(5)创建九宫格 复习弹性布局
(6)创建tabbar

微信公众平台–小程序–数据显示与控制

-小程序在data对象保存数可以在模板中直使用
{{msg}}
-if
xxx
condition:表达式可以变量 true false
true 当前元素正常显示
false 当前元素删除
-if else

<view wx:if="{{condition}}"></view>
<view wx:elif="{{condition}}"></view>
<view wx:else></view>

-for
</view
:默认情况上当前对象 item 当前元素下标 index
:修改默认值 wx:for-item=“当前对象” wx:for-index=“下标”
:wx:key=“index” 为了提高效率小程序在循环之前对数据
排序,需要值(不重复)排序

微信公众平台–事件-原生

pc端项目: 屏幕 >970px 操作 鼠标键盘 事件:点击
移动端项目: 屏幕 <970px 操作 手指 事件:触碰
移动端事件:
-操作依靠手指
-事件 触摸事件-通用原生BOM事件
(1)touchstart 当手指触碰屏幕时发生事件不管理几个手指
(2)touchmove 当手指在屏幕滑动时连续触发
(3)touchend 当手指离开屏幕时触发

#触摸操作 1 3
#滑动操作 1 2222… 3
由于原生移动事件使用不是很方便,可以第三方js库
简单完成操作
zepto.js – 相于pc端 jquery
tap 触碰一次
longtap 长按一次 300ms以上
swipe 滑动
swipeLeft 左滑
swipeRight 右滑
swipeUp 上滑
swipeDown 下滑

#注意事项:禁止屏幕滑动
*{touch-action:none}

微信公众平台–小程序–常见事件

-tap				手指触碰屏幕后马上离开
-longtap			手指触碰屏幕超过300ms 离开 旧
-longpress		手指触碰屏幕超过300ms 离开 新

微信公众平台–小程序–事件绑定

-支持事件冒泡
<view bindtap="事件处理函数">tap me</view>
-不支持事件冒泡
<view catchtap="事件处理函数">tap me</view>

微信公众平台–小程序–事件对象

事件对象:当用户完成一个操作,浏览器触发事件并且创建
事件对象(事件类型;事件坐标;触发元素…)
type:“tap” 触发事件名称
currentTarget: 当前元素
target: 触发元素对象
timeStamp 当组件打开到触发事件经过毫秒

微信公众平台–小程序–模块中数据传递事件处理函数

<view bindtap="handleTap4" data-age="10"></view>
     handleTap4:function(e){
       e.target.dataset.age;
     }

微信公众平台–小程序–学子商城

-九宫格
-轮播图(小程序有一个组件)

      <swiper-item>
         <image src="图片地址"></image>
      </swiper-item>
   </swiper>
   

#轮播图二个版本:本地图片 /pages/img/…

微信公众平台–小程序–学子商城-美食列表

-数据库数据 xz_shoplist
app_server_00 /db.sql 创建表
xz_shoplist[id;img_url;dname;ctime;addr;point;tel]
-app.js node.js 服务器提供分页数据
app_server_00/app.js 处理请求返回数据
get /shoplist 返回数据库第一页数据
pno 页码 pageSize 页大小
-小程序组件 shoplist
-创建组件
-添加标签样式
-发送ajax请求获取数据显示