这两天学小程序的一些总结

远小
623 阅读10分钟

小程序包含一个描述整体程序的app和多个描述各自页面的page

小程序的主体部分由三个问价组成,必须放在根目录,如下:

app.js =>小程序的逻辑

app.json=> 小程序的公共配置

app.wxss => 小程序的公共样式表

一个程序页面由四个相同路劲和文件名的文件组成,分别是:

  • js 页面逻辑
  • wxml 页面结构
  • json 页面配置
  • wxss 页面样式表

在项目中,一下的问价经过编译,因此上床之后无法直接访问.js app.json .wxml .wxss

小程序根目录下个的app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径,窗口表现,设置网络超时时间,设置多tab

  • {
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],//页面的地址
  "window": {
    "navigationBarTitleText": "Demo"
  },//导航栏文本
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]//导航页面
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ]
}
完整配置项说明请参考小程序全局配置

页面配置

什么是wxml和html的区别

什么是wxss ,类似与css ,区别?

  • 新增了rpx尺寸单位 在不同大小的屏幕上自动进行换算

  • 提供了全局的样式和局部样式 形目有根目录中app.wxss会作用域所有小程序页面

    • 局部页面的.wxss样式仅对当前页面生效

    • wxss仅支持部分选择器 类选择器,id选择器,元素选择器,并集选择器,后代选择器,::after和::before等伪类选择器

.js文件

  • app.js是整个小程序项目的入口,通过调用App() 来调用启动整个小程序
  • 页面的.js文件 是页面的入口文件,通过调用Page()函数来创建并运行页面
  • 普通的.js文件 是普通的功能模文件,用来封装公共的函数或属性供页面使用

host environment 程序运行所必须依赖环境

手机微信依赖于安卓或ios系统 ,而微信则是小程序的宿主环境,小程序借助堵住环境提供的能力,可以完成许多普通网页无法完成的功能,例如微信扫码,微信登录,地理定位

host environment 包含的内容

  • 通信模型
  • 运行机制
  • 组件
  • API
通信的主体

小程序通信的主体是渲染层和逻辑层 ,

wxml模板和wxss样式工作在渲染层

js脚本工作在逻辑层

通信的模型分为两部分 1. 渲染层和逻辑层之间的通信 2.逻辑层和第三方服务器之间的通信都是由微信客户端进行转发

小程序启动的过程

把小程序的代码包下载到本地,解析app.json 全局配置文件 执行app.js小程序的入口文件,调用App()创建小程序实例 渲染小程序首页 小程序启动完成

页面渲染的过程

  • 加载解析页面的.json配置文件

  • 加载页面的.wxml模板和 wxss样式

  • 执行页面的.js文件,调用Page()创建页面实例

host environment =>组件

组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构.官方把小程序的组件分为了9大类

视图组件

view 相当于html中的div

sroll-view 可滚动的视图区域

swiper swiper-iten 轮播图容器组件和轮播图item组件

  • indicator-dots 是否显示面板指示点
  • indicator-color 指示点颜色
  • indicator-active-color 选中的指示点的颜色
  • autoplay 是否自动切换
  • interval自动切换时间间隔
  • circular 是否采用衔接滑动

text 和 rich-text

text 文本组件 类似于span ,行内标签 rich-text 富文本组件 支持把HTML字符串渲染为wxml结构

button

功能更加的强大 type size plain 更多功能查文档

image

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

  • scaleToFill 缩放模式,不保持纵横比缩放图片,使图片宽高完全拉伸填满image元素

  • aspectFit 缩放模式 保持纵横比 是图片不的长边能够完全显示出来 会留白

  • aspectFill 缩放模式 保持纵横比,只能保证图片的短边能完全显示出来 会删减

  • widthFix 宽不变,高度自动变化

  • height 高度不变,宽度自动变化

    小程序版本

    • 开发版本 使用开发者工具,可将代码上传到开发版本中,开发版本只保留没人最新的一份上传的代码,点击提交审核,可将代码提交审核,
    • 体验版本,可以选择某个开发版本作为体验版,并选取一份体验版
    • 审核中的版本 之后一份代码处于审核,有审核结果后以客发布发哦吸纳上也可以直接重新提交审核和,覆盖源审核版本
    • 线上版本 线上所有用户使用的代码版本,该版本在最新版发布后被覆盖

基础内容

数据绑定

类似于vue,在.js中的page的data中定义数据,在wxml中使用数据,

特别注意

小程序中,无论标签的属性还是标签的内容,都是通过mustache {{meaasge}}语法进行数据绑定的,

事件绑定

事件是渲染层到逻辑层之间通讯的方式,用户在渲染层产生的行为,反馈到逻辑进行业务的处理

事件回调触发的时候,形参中的会默认有个事件对象event

特别注意

事件处理函数必须与data平级

有一下属性

  • type 事件类型
  • timeStamp 页面达赖书法事件所经过的毫秒数
  • target 触发事件的组件的一些属性值集合 触发该事件的源头组件
  • currentTarget 当前组件的一些属性值的集合 则是当前事件所绑定的组件

小程序传参

可以使用data-shuxing 在event.dataset中可以获取传入的参数

在小程序的双向绑定

类似于input 在小程序中加入了很多特殊的api 类似 于placeHolder-style focus type 可以拉取出小程序提供的自带的键盘类型

然后监听bindinput 事件 然后再回调函数中 调用小程序自带的this.setData({ })

条件渲染

wx:if="" wx:elif wx:else

如果一次性控制多个组件的展示,可以使用block这个标签进行包裹,类似于template,知识一个包裹性质的容器

wx:if 和hidden 的区别类似于v-if 和v-show 如果经常需要使用某个组件,最好使用hidden

wx:for类似于vue 的v-for

区别: wx:for="{{dataList}}" 用的时候默认是item与index 可以自定义wx:for-index="theIndex" wx:for-item="theItem" 而v-for="(theItem,theIndex) in dataList"

相同点: wx:key="theIndex" 与 :key="theIndex" diff算法

wxss模板样式

wxss具有css大部分的特性.同时,wxss还对css进行了扩充以及修改,以适应微信小程序的开发

主要集中再两点

rpx

rpx是微信小程序独有放入,用来解决屏幕适配的问题\

rpx的实现原理非常简单 就,监狱不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx把所有设备的屏幕,在宽度上等分750份,1份代表1rpx所以:在较小的 设备上,1rpx所代表的宽度较小,在较大的设备上,1rpx所代表的宽度较大

样式导入

使用wxss提供的@import语法,可以导入外联的样式表

全局样式和局部样式

定义在app.wxss中的样式为全局样式,作用于每一个页面

局部样式: 在页面的.wxss文件中定义的样式为局部样式,值作用于当前页面

注意:1 当局部样式和与 全局样式冲突的时候,根据就近原则,局部样式会覆盖全局样式

​ 2.当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式

全局配置文件以及常用的配置项

小程序目录下的app.json时小程序的全局配置文件

  • pages 记录当前小程序所有页面的存放路径 放在第一位的,就是最先渲染的页面
  • window 全局设置小程序窗口的外观
  • tabBar 设置小程序底部的tabBar效果
  • style 是否启用新版的组件样式

window

  • 导航栏 -顶部导航区域

  • 背景去-默认不可见,下拉才显示

  • 页面主体区-页面主体用来显示wxml中的布局

  • navigationBarTitleText 导航栏标题文字内容

  • navigationBarBackgroundColor 导航栏背景颜色

  • navigationBarTextStyle 导航栏标题颜色

  • backgroundColor 窗口的背景色

  • backgroundTextStyle 下拉loading 的样式,仅支持dark/light

特别注意: 有坑

  • tabBar配置的pagePath必须在同时在app.json中pages中同时配置 list 是数组类型

  • 不同于vue和html ,在小程序中新增页面,不能独立运行,必须在相应的.js文件中写onLoad:function(){}

下拉刷新一般页面单独配置

网络数据请求

如何在小程序中发起网络请求

  • 该请求不能称作ajax请求,微信官方要求使用于宁使用https协议
  • 配置后台的request 合法域名
  • 具体代码
  • 小程序中的网络请求不存在在跨域的问题

小程序中网络数据请求的限制

处于安全性方面的考虑,小程序官方对数据接口的请求做出了如下两个限制

1.只能请求https 类型的接口

2.必须将接口的域名添加到信任列表之中

配置request 合法域名

需求描述:假设自己的微信小程序中,希望请求www.escook.cn/

配置步骤:登录小程序管理后台->开发->开发设置->服务器域名->修改request合法域名

小程序发送网络请求很类似jquery 的$.ajax

wx.request({
// 请求地址必须是https 开头的
// 必须在 开发的故武器域名中修改增添request合法域名
 url:"https://escook.cn/api/get",
 method:"get",
 data:{
   name :"niaho ",
   age:22
},
  success:(res)=>{
  console.log(res)
}
})

跳过request 合法域名校验

如果只有http协议

可以临时开启[开发环境不校验合法域名,web-view,tls,https]选项 ,跳过request 合法域名的校验,跳过仅限在开发和调试阶段使用

ajax依赖于XMLHttpRequest 这个对象,小程序叫做发起网络数据请求

页面配置

小程序中,每个页面都有自己的.json文件,用来对当前页面的窗口外观,页面效果等进行配置

小程序中,app.json中的window节点,可以全局配置 小程序中每个页面的窗口表现

如果某些小程序想要拥有特殊的窗口表现,此时,页面级别的.json配置文件 很典型的例子navigationBarTitleText , 符合就近原则

API的3大分类

1.事件监听API ,监听事件的触发 wx.onWidthResize(function callback)

2.同步API 以Sync 结尾的API都是同步API ,执行的结果 可以通过函数返回值直接获取

wx.setStorageSync('key','value')

3.异步API 类似于jQury 中的$.ajax(options)函数 ,需要通过success,fall ,complete 接受调用的结果

表单组件

导航组件

媒体组件

map地图组件

canva 画布组件

开放能力

无障碍访问

杂乱知识点积累

url的编码与解码

为什么要编码?

Global 对象的encodeURL()和encodeURLComponent()方法可以对URL(uniform Resourse Identifiers ,通用资源标识符) 进行编码 以便发送给浏览器,有效的URL中不能包含某些字符,如空格,而这两个URL编码方法就可以对URL进行编码,他们用特殊的UTF_8编码替换所有无效的字符,从而让浏览器3能够结构和理解

编码

其中encodeURL()主要用于整个URL 例如 www.wrox.com/illegal 而encodeURLComponent()主要用于对URL中的某一段进行编码 主要区别在于encodeURL()不会对本身属于URL的特殊字符进行编码,例如冒号,正斜杠,问好,井字号 ,encodeURLComponent 则会对它所发现的任何非标准字符进行编码

解码

与以上两个方法对应的方法使decode URL()和decodeURLComponent().

decodeURL只能对encodeURL替换的字符进行解码,例如,它可将%20替换成一个空格,但不会对%23作任何处理,因为%23表示井字号而不是使用encodeURL()替换的,

而decodeURLComponent 能够解码使用任何特殊字符的编码

rpx?

rpx是微信小程序的尺寸单位,一般以iphone6为例子,屏幕宽度375px,共有750px个物理像素,则1rpx=0.5px=1物理像素

Object.keys()方法的常见用法

传入对象,返回对象的key值
var obj=new Object()
obj={a:1,b:2}
console.lof(Object.keys(obj))  //返回数组中所有属性的值所组成的数组
传入字符串 ,返回索引
var str=new String()
str="abc123"
OBject.keys(str)//将字符串所有每一个字符化为数组中的每一项
传入构造函数,返回数组或属性名

操作列表组件

avatar
文章
阅读
粉丝