微信小程序开发01

      今天是学习微信小程序的第一天，开始接触总会感觉到陌生与不习惯。首先是对于新软件的使用，在官网下载微信开发者工具，熟悉每一个菜单选项的使用，其中上方菜单栏的“微信开发者工具”->“关于”可以直接连接到官方API文档，这种方式学习较为直接且不易被误导。只是，最初查看此文档会显得复杂难懂，总之，slow to fast。

      以下是学习路径上的一些个人经验：

•       最初开发，选择自行建立目录和配置文件，不推荐使用快速建立文件。首先，需要建立page(看个人命名习惯，用于存放功能实现的文件)、全局app配置文件等，其中app.json等文件中的代码可查看API官方文档，若包含某个文件（如“pages/welcome/welcome”）,需要在welcome.js中至少包含“Page（{}）”（注意P大写，无s）。
• 在启动页的在制作过程中，背景色全铺是一个较难实现的点。通过设置启动页的background-size:100%，以及app.json中设置window的background-clor:#3db;均只可以达到容器内的颜色为#3db。方法：

　　　（1）设置app.json中的window属性：

 

"window":{
    "navigationBarBackgroundColor":"#3db",
    "backgroundColor": "#3db"
  }

 

　　　（2）在app.wxss中设置page属性

page{
  background-color: #3db;
}

　　　　（3）尤其注意第（1）步中设置导航栏背景颜色：

"navigationBarBackgroundColor":"#3db",

•  将展示的方形图片设置为圆形图片

对比效果：

　　　　　　

      通过设置border-radius:360rpx即可实现，例如：

welcome.wxml中：

<image class="user-avatar"  src="/image/NEW/cover.jpg"></image>

welcome.wxss中：

.user-avatar{
    width:250rpx;
    height:250rpx;
    margin-top:160rpx;
    border-radius: 360rpx;
}

• 尤其注意虽然css等代码在小程序中依然可以使用，但CSS文件在小程序开发软件中无法识别。