首页 > 编程语言 >微信小程序开发学习日志

微信小程序开发学习日志

时间:2023-12-24 14:03:07浏览次数:40  
标签:渲染 微信 程序开发 json 组件 日志 view swiper 页面

文件夹:

pages:

index:首页

logs:日志

json配置文件:

app.json:

app.json为全局配置,包括了所有页面路径(pages)窗口外观(window)界面表现(style)底部tab等。

#页面配置会覆盖全局配置

project.config.json:

"setting" : 本地设置 "es6": JS编译成ES5是否开启 "postcss": 上传代码时样式自动补全是否开启

sitemap.json:

"action": 是否允许被索引(disallow为都不允许)


新建小程序页面:

修改项目首页:

#小程序会把排在第一的页面当作项目首页进行渲染

WXML:

小程序框架设计的一套标签语言,用于构建页面结构

  • #div,view:布局
  • #span,text:文本
  • #img,image:图像
  • #a,navigator:导航跳转

WXSS:

一套样式语言,用于描述WXML的组件样式,美化页面结构

JS逻辑交互:

处理用户的操作。例如响应用户点击,获取用户位置等等。


通信的主体:

小程序的通信主体为渲染层逻辑层

通信模型:

小程序启动过程:

页面渲染过程:


组件:

组件由宿主环境提供,开发者可基于组件快速搭建出漂亮的页面结构。 常见组件分类

1.视图类组件:

view:

scroll-view:

例:

#滚动条实现

swiper和swiper-item:

例:

#轮播图实现(类似广告条幅) #每一个可轮播的内容为swiper-item组件实现

view组件基础布局:

  1. #定义大容器结构
  2. #定义文本样式
  3. #添加背景颜色
  4. #定义布局

scroll-view滚动效果:

swiper和swiper-item轮播图:

#有几张轮播图就需添加几个swiper-item项

nth-child()后面需要加空格!

swiper组件常用属性:


text和rich-text:

#新版本selecttable已经被废弃了,新增useselect属性,但仍可使用


button和image:

#style设置可以控制按钮样式

#可用src属性指定渲染的具体图片

按比例缩放:


API:


数据绑定:

mustache(插值表达式):

将data中的数据绑定到页面中渲染,使用mustache语法(双大括号)将变量包起来即可 #info和msgList均为变量名

语法格式:

<view>{{要绑定的数据名称}}<view>

#PageP需要大写!

动态绑定内容:

动态绑定属性:

三元运算:

算数运算:


事件:

回调触发

target和currentTarget区别:

bindtap语法格式:

#console.log(e)为接收的数据显示在调试器中


this.setData(dataObject)方法:

this.函数.参数代表旧值

事件传参:

bindinput的语法格式:


条件渲染:

wx:if和wx:elif以及wx:eles判断:

#两个等号是数值相等,三个等号是全等,条件不一样

结合< block >:

例:


hidden控制元素显隐:

#配置hidden属性时,不能使用block标签;而且,无论条件成立与否都会被渲染


标签:渲染,微信,程序开发,json,组件,日志,view,swiper,页面
From: https://blog.51cto.com/u_16467916/8955390

相关文章

  • 微信小程序开发笔记[6]-蓝牙ble扫描设备
    摘要使用微信小程序扫描BLE设备,找到指定设备后弹窗.平台信息微信开发者工具Stable1.06.2310080原理typescript+less开发模式[https://developers.weixin.qq.com/miniprogram/dev/devtools/compilets.html][https://blog.csdn.net/Boale_H/article/details/121360082]......
  • MySQL日志如何查询
    MySQL有多种类型的日志,包括错误日志、查询日志、慢查询日志等。以下是查询MySQL不同类型日志的方法:1.错误日志查询:MySQL错误日志记录了MySQL服务器启动、运行过程中的错误信息。错误日志通常位于MySQL数据目录下的错误日志文件中,文件名可能是error.log或hostname.err。......
  • Android对接微信登录记录
    Android对接微信登录记录-Stars-One的杂货小窝Android项目要对接下微信登录,稍微记录下踩坑点代码1.添加依赖implementation'com.tencent.mm.opensdk:wechat-sdk-android:6.8.0'2.声明Activity在你的清单文件添加下面Activity声明<application> <activity android......
  • JVM虚拟机系统性学习-JVM调优之通过gceasy分析GC日志对堆、元空间、线程堆栈和垃圾回
    通过gceasy工具对生成的GC日志进行分析这里使用的JDK版本为JDK8!在分析GC日志时,可以同时采用多种工具(Arthas、gceasy、JVM连接Graphana监控)进行分析,避免某种工具分析不准确gceasy每个月只可以免费分析5个gc日志,因此要节约机会!hhh!我们先将gc.log文件放入gceasy......
  • 微信开发者之猜数字小游戏js代码
    // pages/game/game.jsPage({  /**   * 页面的初始数据   */  data: {  },  initial: function() {    this.setData({      answer: Math.round(Math.random() * 100),//获取随机数      count: 0,//回合数      tip: '',//提示语......
  • JVM虚拟机系统性学习-JVM调优之GC日志分析
    JVM调优首先,为什么要JVM调优呢?JVM调优的目的就是为了让应用程序使用最小的硬件消耗来承载更大的吞吐量什么情况下需要JVM调优呢?系统吞吐量下降,或系统延迟较高出现OOMFullGC频繁GC停顿时间过长(超过1s,已经影响用户体验)调优主要调什么?JVM调优主要是两方面:内存分配和垃圾回......
  • 客服端日志设计-iOS
    客户端日志系统使用场景用户通过appstore下载app后,在使用过程中出现了异常情况,例如功能异常等.例如BugHD会自动捕获崩溃信息,但开发人员想重现是不容易的.设计方案一.收集log模块化,暴露接口,对日志分级,info,debug(支持打印类似NSLog),warn,error等......
  • 补题日志
    补题日志**Codeforcesrating:1770**goal:1900ATcoderrating:1254goal:1600CodeforcesRound915(Div.2)D不难发现,设当前排列为\(q_1,q_2\dotsq_n\),把\(q_1\)移到末尾,造成的影响有:对于前缀中\(\text{mex}_i<q_1\)的\(i\),移动后不改变它的值。对于前......
  • 微信转帐说有限额的问题
    微信转帐说有限额的问题腾讯公司为了名正言顺的动用你帐户上的钱,引导你注册微众银行的帐户,才这样做的一般的银行,我们注册好帐户,在帐户存进钱后银行会付给我们利息按存款方式计算利息活期一年定期三年定期.............银行可以用我们帐户的钱去投资,赚取收益......
  • 微信小程序中使用蓝牙信标
    微信小程序使用蓝牙信标流程:使用wx.startBeaconDiscovery({})开始搜索附近的Beacon设备使用wx.onBeaconUpdate(res=>{})监听Beacon设备更新事件,仅能注册一个监听使用wx.stopBeaconDiscovery({})停止搜索附近的Beacon设备代码:console.log("这是测试蓝......