
微信小程序学习笔记
Late whale
这个作者很懒,什么都没留下…
展开
-
微信小程序学习笔记(五)——JS入门小程序:用按钮实现对价格进行过滤
文章目录项目结构index.wxmlindex.wxssindex.js效果最后项目结构index.wxml主要的改动:将之前的head换成了两个button;用js代码实现多个card,每个card的数据也存在js中(js动态渲染);<view class="body"> <view class="head"> <button size="mini" bindtap="OnFree">免费</button> <button原创 2020-07-14 18:11:51 · 499 阅读 · 0 评论 -
微信小程序学习笔记(四)——首页小程序实例(仿腾讯课堂首页)
效果项目结构index.wxmlwxml里很简单,核心东西都在index.wxss中。<view class="body"> <!-- 头部 --> <view class="head"> <view class="head_bar active">推荐</view> <view class="head_bar">精品</view> <view class="head_bar">排行原创 2020-07-13 16:44:24 · 702 阅读 · 0 评论 -
微信小程序中 空格符和换行符的使用
符号作用\t单空格\n换行 一半汉字大小的空格 汉字大小的空格 自适应字体(font-size)大小的空格注意所有的符号的使用需要在<text>标签中实例多个\t无效 <!-- 这里会有一个单空格 --> <view><text>所谓的\t\t\t天体指的就是人们平日所说的星星,指的是肉眼可见的宇宙中的天体。星星内部的能量的活动...原创 2020-07-12 19:25:11 · 4570 阅读 · 0 评论 -
微信小程序 等比缩放图片不变形
问题在学习微信小程序时,发现图片显示不完整;索性加上width=100%,结果就显示变形,反正效果都不好;之前的效果之前的代码<image class="bg" src="../img/bg.jpg" >左图为显示效果,右图为原图解决办法在image标签中加入mode="widthFix"如: <image class="bg" src="../img/bg.jpg" mode="widthFix" >显示效果:...原创 2020-07-12 17:57:21 · 1343 阅读 · 1 评论 -
微信小程序学习笔记(三)——两名片小程序实例
文章目录项目结构修改titleindex.wxmlindex.wxss最终效果项目结构新建img文件夹,放入一张图片(练手的话随便即可)修改title修改app.json中 navigationBarTitleText值即可index.wxml首先将我们整体界面的结构构造出来。代码如下:<image src="../img/pic.jpg"></image><view class="comment">仰望星空亦要脚踏实地</view>原创 2020-07-12 16:49:22 · 1180 阅读 · 0 评论 -
微信小程序学习笔记(二)——项目结构及功能
文章目录小程序三大基石页面结构文件细讲小程序三大基石在小程序中最重要的就是三大基石:app.js,app.json,app.wxss。文件名必填作用app.js是小程序逻辑app.json是小程序公共设置app.wxss否小程序公共样式表页面结构每个小程序由一个个页面组成,每个页面由四个文件组成:.js,.wxml,.wxss,.json。文件名必填作用.js是页面逻辑,JavaScript脚本.wxml原创 2020-05-25 21:00:42 · 399 阅读 · 0 评论 -
微信小程序学习笔记(一)——hello world
文章目录准备工作实战查看AppID准备工作访问微信公众平台注册自己的小程序下载对应自己电脑的小程序开发工具安装实战打开微信开发工具,点击新建项目AppID需要在微信公众平台上查找(不知道如何查看的往下翻)项目创建成功后如图所示这里显示的页面就是index.wxml,通过修改index.wxml来显示需要的内容<!--用法与网页一致,可以使用内联样式表--><view style="color:blue; ">hello word&l原创 2020-05-23 19:34:03 · 315 阅读 · 0 评论