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

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

​ 本篇文章主要介绍微信小程序前端开发，包括小程序入门教程链接、注意事项以及小贴士。如果有写的不清楚的地方，或者有任何问题，可以在评论区留言或私信都可以。

一、小程序入门

​ 本人有一部分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、图片预览及上传至后台

​ 微信小程序图片预览，并上传至后台。（明天写，附链接）