技术小白一枚,如有出现错误的地方,还请各位多加指点,也欢迎前来交流。
目录
本篇文章主要介绍微信小程序前端开发,包括小程序入门教程链接、注意事项以及小贴士。如果有写的不清楚的地方,或者有任何问题,可以在评论区留言或私信都可以。
一、小程序入门
本人有一部分Web三件套(H5+CSS+JS)的一些基础,当然也没有到精通的地步哈~所以各位小白放心学吧。
我推荐的视频是学堂在线的学做小程序——实战篇:树洞小程序教程,这是一个免费的小程序实战教程,本人感觉课程对有web基础以及后台开发语言(JAVA、PHP、Python皆可)基础的同学来说,上手很快。本人觉得课程讲的很清楚并且也很基础哦~(我不是打广告哈,这是我的一个推荐)
课程中前端为微信小程序开发,后台为PHP,数据库为MySQL,运行的平台是新浪云SAE。如果有同学想要用PHP进行后台的开发,这是一个很棒的课程哦~
二、注意事项
在开发小程序之前,可以先简单的读一下个人开发小程序的审核要求,这样可以避免在功能开发后,面临上线审核时不予通过。例如,以个人号上线的小程序,不允许有自主上传的功能。
三、小贴士
1、微信小程序本地连接后端开发
暂时无需将小程序后端代码上传至服务器,在本地即可进行代码的前后端连接和调试。但是真正上线的时候,这种方式是不可以的哦。
https://blog.csdn.net/Bo_03/article/details/107894980
2、图片自适应按比例显示
在开发中涉及到等比例显示图片。将image标签中使用mode=“widthFix”(**widthFix:**宽度不变,高度自动变化,保持原图宽高比不变),接下来给图片设置一个宽度即可。
<image class="pic" mode="widthFix" style="width: 50rpx;"></image>
3、textarea标签,出现内容重影的情况
将内容绑定到标签的value属性中,不要直接放在标签中。
-----------------------------------wxml-----------------------------------
<textarea maxlength="-1" bindinput="bingTextAreaBlur" value="{{detail}}"></textarea>
-----------------------------------js------------------------------------
bingTextAreaBlur: function (e) {
var detail = e.detail.value
console.log(detail)
},
4、背景使用图片设置,并实现自适应
图片设置mode="aspectFill"属性(保持宽高比例,图片充满,超出裁剪)
注意:背景图片不易选择过大,可能造成闪退现象
-----------------------------------wxml-----------------------------------
<image class="bg" src="../../images/bg.jpg" mode="aspectFill"></image>
-----------------------------------css------------------------------------
page{
left: 0rpx;
right: 0rpx;
height:100%;
}
.bg{
width: 100%;
height: 100%;
position:fixed;
background-size:100% 100%;
z-index: -1;
}
5、获取标签中的内容
-----------------------------------wxml----------------------------------
<view data-id="{{itemName.id}}" bindtap='delete'></view>
-----------------------------------js------------------------------------
delete: function (e) {
var id = e.currentTarget.dataset.id
console.log(id)
},
6、图片预览及上传至后台
微信小程序图片预览,并上传至后台。(明天写,附链接)