小程序知识点

小程序知识点

移动端开发

原生的

webapp h5+c3+js+(flex,media)

**@media  **https://www.runoob.com/cssref/css3-pr-mediaquery.html

介绍

小程序 逻辑层（App Service） 指得就是 javaScript

注意：小程序框架的逻辑层并非运行在浏览器中，因此  JavaScript  在 web 中一些能力都无法使用，如  window，document  等。

小程序开发文档

指南   基本入门

框架   小程序的配置说明 wxml 语法 css 语法

组件 html 的标签和属性

api js 里面的函数（接口）

云开发   自己带了后端（云函数，数据库）

项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
	pages //页面相关
      index
          index.js --页面对应的js
          index.json --页面的配置信息
          index.wxss  --页面的css
          index。wxml --页面的html
      logs
  utils  --存放的公共js,写一些公共的函数
      util.js
  app.js  --整个小程序启用的文件
  app.json  --针对小程序的配置
app.wxss  --整个app的样式，一般放公共的样式
  project.config.json  --工程文件、有版本信息、用了插件、作者信息、appid（用别人的

app.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "pages":[ // 页面
    "pages/index/index", //默认第一个路径作为小程序首页
    "pages/logs/logs" //后面写的路径都必须要有对应的页面文件
  ],
  "window":{ // 窗口
    "backgroundTextStyle":"light",
    --只有两个值，light|dark 下拉窗口才会有 设置“enablePullDownRefresh”
    "navigationBarBackgroundColor": "#fff",
    --小程序最上面窗口的颜色，只能16进制
    "navigationBarTitleText": "Weixin",
    --最上面窗口上标题的内容
    "navigationBarTextStyle":"black"
    --导航栏标题颜色，仅支持 black / white
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

app.js

1
2
3
4
5
6
7
8
App({
  onLaunch() {
    //小程序运行时候要做什么
  },
  globalData: {
    //全局数据
  },
});

pages

wxml

组件化

view >  块级元素

block 、text >  行内元素

js

1
2
3
4
5
6
7
8
9
Page({
  data: {
    // 各种页面的数据，数据类型可以是任意的
  },
  fun1: function () {},
  fun2() {},
  // 生命周期函数，
  // onload 页面加载时
});

js 中调用方法：this.方法名

js 中访问数据: this.data.数据对应的 key

**    **

基础

数据

数据绑定

1
2
<view id="abc{{user}}">{{gf.age+age}}</view>
<view>{{gf.age>18 ? old : 'good'}}</view>

数据修改

1
2
3
this.setData({
  key: value,
});

globalData

全局数据 app.js 中有个

const AppInstanse = getApp();

AppInstance  就包含了全局配置的信息，

AppInstance.globalData 就是所有得全局数据

条件渲染

以前 vue   =>  v-if  v-show

小程序

wx:if  不满足条件就不渲染，满足条件就显示

hidden  不管是否满足都会渲染（能找到节点），通过控制样式是否显示。满足条件就隐藏。

列表渲染

vue  => v-for=’v in arr’

小程序

wx:for=”arr” 字符串 数组 对象都可以遍历渲染

最好使用 view 在列表循环外再套一层** **** **

wx:for-item=”循环项的名称”

wx:for-index=”循环项的索引”   – 值是字符串 就是自定义 item 和 index 。

1
2
3
<view wx:for="{{brother}}">
  {{item}} - {{index}} // item(值) index(下标,或者对象的key) 
</view>

事件添加

bindtap –touch click –小程序的点击事 for。

bindxxx=”函数名”

bindinput 表单一改就触发该事件

bindchange  用户 checkbox checkbox-group

catchxxx (catchtap)

bindxxx

常按 时间：

longtap 会影响 tap 事件

longpress 不会影响 tap 事件

input

bindinput

bindchange

bindblur

bindfocus

bindconfirm

picker(普通的下拉列表，多列下拉，地区，日期，时间)

mode

bindcancel

bindchange

事件对象

**   ** input 的值存在 input 的事件对象中 e.detail.value

type

detail

target

存的事件源的一些属性

id

dataset 自定义属性（data-name）

offsetLeft  事件源这个元素相对窗口的偏移

offsetTop

事件函数传参

推荐自定义属性 data-xxx

冒泡事件的子父级触发

如果是使用 bind 绑定，则子级触发一定会触发父级

如果是使用 catch 绑定，那么子级触发就不会触发父级（catch 是在当前级停留，不会去当上一级）

样式

rpx

rpx(responsive pixel)  可以根据屏幕的宽度进行自适应 **默认任何的屏幕的宽度都是 ****750rpx**

iphone6  屏幕宽度 375px,有 750 个物理像素， 750rpx=375px=750 物理像素

px 转 rpx 公式  page(屏幕的支持的最大宽度)

1
page px = 750 rpx 1 px = 750 rpx / page 100 px = 750 rpx * 100 / page

运算符前后需要添加空格

width:calc(750rpx * 需转换的px宽度值 / page)

通配符

在微信小程序中 不支持 通配符 *

全局设置 需要列举 需要设置的所有标签

1
2
3
4
5
6
7
8
9
10
11
page,
view,
text,
swiper,
swiper-item,
image,
navigator {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

box-sizing

<font style="color:#000000;">content-box|border-box|inherit</font>

vw

css3 新单位，view width 的简写，是指可视窗口的宽度。假如宽度是 1200px 的话。那 10vw 就是 120px

举个例子：浏览器宽度 1200px, 1 vw = 1200px/100 = 12 px。

vh

css3 新单位，view height 的简写，是指可视窗口的高度。假如高度是 1200px 的话。那 10vh 就是 120px

举个例子：浏览器高度 900px, 1 vh = 900px/100 = 9 px。

小程序是不支持 height=100%的 所有使用 height=100vh

currentColor

css 的颜色属性 （当前文字的颜色）

由于 color 属性可以被继承，所以有的时候只需要在祖元素设置好 color 属性，其子元素和孙元素都可以使用 currentcolor 来调用祖元素的  

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！