微信小程序开发—基础入门（一）

技术小白一枚，如有出现错误的地方，还请各位多加指点，也欢迎前来交流。

一、小程序入门

本人有一部分Web三件套（H5+CSS+JS）的一些基础，当然也没有到精通的地步哈~所以各位小白放心学吧。

二、注意事项

在开发小程序之前，可以先简单的读一下个人开发小程序的审核要求，这样可以避免在功能开发后，面临上线审核时不予通过。例如，以个人号上线的小程序，不允许有自主上传的功能。

三、小贴士

暂时无需将小程序后端代码上传至服务器，在本地即可进行代码的前后端连接和调试。但是真正上线的时候，这种方式是不可以的哦。

https://blog..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、图片预览及上传至后台