微信小程序

255 阅读2分钟

一、标签

text 行内元素像

view 块级元素 像div一样

block 无意义标签 不存在于dom的标签 block起到包裹作用 是图片标签 ../../上一级的上一级

微信小程序选择器:使用类选择器(class)

二、小程序中的app

app.json中的window

  • backgroundTextStyle:下拉活动所展示的样式,只有dark和light俩种可以选,一个深色,一个浅色,对 应诸如下拉刷新这样的行为所展示的样式。
  • navigationBarBackgroundColor:顶部导航栏的背景颜色,可以直接用颜色代码指定,比如"#0094ff"
  • navigotionBarTitleText:顶部导航栏的内容,如:“我的导航栏”
  • navigationBarTextStyle:顶部导航栏内容的颜色,这里只能写black和white俩种颜色
  • enablePullDownRefresh:下拉刷新是否开启,默认false
  • backgroundColor:下拉刷新区域的背景颜色,可自定义

app.js、app.wxss中设置的为所有页面通用的js和样式

三、小程序中的js

作用:JS主要是用来做交互,比如:响应用户的点击、获取用户的位置等等。通过编写 JS 脚本文件来处理用户的操作。

简单来说,WXML决定有什么内容,WXSS决定内容长什么样子,JS呢,决定了页面和用户操作的交互,体验好不好就看JS了。 1:在wxml中获取index.js中的data值 小程序的插值语法 {{ }} 可以获取index.js中data里的值;

     <view bindtap="handle" data-msg="hi">{{username}}</view>

2:在创建的文件wxml中有对应的js文件里面有data值

   handle:function(e){
    /* 解构赋值 */
    let {currentTarget:{dataset:{msg}}} = e;
    // console.log(msg)
   
    /* 想要设置值 视图和数据双向绑定显示 要使用this.setDate */
    this.setData({
        username:"李四"
    })
     /* 获取小程序里面的值要使用this.data.的方式 */
     console.log(this.data.username)
},

3:获取全局数据在app.js文件中写

  /* 全局数据 使用getApp()方法获取 */
  globalData: {
userInfo: null,
  name:'taotao'
}

在创建的文件的js中获取全局数据

 dian:function (){
    /* 使用getApp获取全局数据 */
    const {globalData:{name}} = getApp()
    console.log(name)
},

4:点击事件 bindtap 是小程序中的点击事件 会产生冒泡显示 catchtap 同为点击事件但是它可以阻止默认的冒泡事件

插值语法、点击事件用法:

     <view bindtap="handle">{{username}}</view>
复制代码

5:在创建的文件的:需要在对应的json中配置onReachBottomDistance:0 主页面y轴出现滚动条 onReachBottomDistance表示滚动条距离底部多少的时候触发*/ 小程序自带单位rpx 把屏幕的宽度 等比例分成750份 占满宽度直接写750rpx即可 rpx总体上的大小 比 px要小