ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

微信小程序 学习笔记(二)了解他的组成

2020-07-09 16:03:48  阅读:224  来源: 互联网

标签:配置文件 样式 微信 程序 笔记 跳转 页面 监听 wx


继续-》》

 在app.json 文件的pages 下写一个想要的名字 ,然后Ctrl+S保存 自动会生成四个文件:.js .json .wxml .wxss

 .wxml :类似html 

 看一下常用标签:

<view> 类似于div
<button> 按钮
<form>表单
<image>图片
<text> 文本
<icon>图标
<checkbox> 复选框
<radio>单选框
<input>输入框
<progress>进度条

wxss 样式

选择器:类似

#id            id="balabala"

.class       class="balabala"

element    view

::after     view::after

::before     view:before

根据屏幕大小改变的 rpx

引用外来样式:

@import "../index/index.wxss";

可以把全局样式写到:app.wxss

当然页面本身的样式优先级要高于 全局样式。

.js

打开js文件。可以看到生命周期函数和事件处理函数。注解已帮我们写好。

生命周期:

onLoad:监听页面加载,一个页面只会调用一次。

onReady:监听页面初次渲染完成。一个页面只会调用一次。

onShow:监听页面显示。例如,从后台切入前台时触发。

onHide:监听页面隐藏。例如,从前台切入后台时触发。

onUnload:监听页面卸载。例如,使用路由API中的wx.redirectTo()或wx.navigateBack()跳转其他页面时触发。

 

 事件处理函数:

 

 .json 配置文件

app.json是应用级配置文件;我们自己创建的是页面级配置文件。

在页面及配置文件中我们可以改变:导航栏样式、是否允许滚动条等等。

 

 

bind 绑定

  tap:点击事件;

  longtap:长按事件;

  touchstart:触摸开始;

  touchend:触摸结束;

  touchcancel:取消触摸;

 

单击“⋯”会在底部弹出一个菜单,在菜单中有一项“转发”,单击转发就会触发onShareAppMessage 事件。单击“⊙”可以在前台、后台之间切换,通过此按钮可以测试onShow和onHide事件

debug:

 "debug": true

 弹窗:

1.

 

 代码:

wx.showToast({
        title: '暗号错误!',
        icon: 'none',
        duration: 1500
})

2.

 代码:

wx.showModal({
        title: '提示',
        content: '是否跳转?',
        success: function (res) {
          if (res.confirm) {//这里是点击了确定以后
            console.log('用户点击确定')
          } else {//这里是点击了取消以后
            console.log('用户点击取消')
          }
        }
})

 跳转:

1.后台 参数:url ,success ,fail ,complete

wx.navigateTo(OBJECT)

2.跳转到应用的某个页面 参数:url ,success ,fail ,complete

wx.redirectTo(OBJECT) 

3.返回上一页 参数:data

wx.navigateBack(OBJECT) 

 

等有时间 待完成

 

@

标签:配置文件,样式,微信,程序,笔记,跳转,页面,监听,wx
来源: https://www.cnblogs.com/DarGi2019/p/13273538.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有