【小程序自学笔记(一)】入门||图片添加||文字格式||自食用

step by step.

目录

官方教程、API

调试器

页面标题修改

图片导入

图片添加

效果：

文字添加

换行

xxx 

文字部分class起名（传入wxss进行操作）

文字格式调整（居中|加大|粗体|间隔...）

效果 

---

官方教程、API

小程序开发起步 | 微信开放社区学习 5 节课程，从 0 至 1 做第一个属于你的小程序，深入浅出了解小程序开发。本系列视频，由腾讯课堂NEXT学院、微信学堂联合出品。https://developers.weixin.qq.com/community/business/course/000264e20a0dd8e69669b609451c0d基础 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/api/

调试器

从页面中定位代码，可以随时进行修改。 

页面标题修改

app.json中的navigationBarTitleText

图片导入

添加文档image，将图片拉进去即可。

图片添加

wxml：

/**index.wxss**/
Page{

}
image {
  /*充满整个屏幕*/
  width:100%; 
}

.commet{
  text-align: center;
  font-size: 14px;
}

效果：

文字添加

换行

xxx

wxml：
图片注解：y9-view

  这是y9的第一个小程序。
  第二行。
  -第三行
  every days 
  hope we get a good miniprogram
  conguatulations!

文字部分class起名（传入wxss进行操作）

这样才可以在wxss文件里面进行格式处理

wxss：
.y9fview{
  /**图片下的注释**/
  text-align: center;
  font-size: 14px;
  color: gray;
}

.body{
  /**文字部分**/
  padding: 30px;
  text-align: left;
}

文字格式调整（居中|加大|粗体|间隔...）

在wxss里编写即可，查看API官方文档大把可以调的.. 

图片注解：y9-view

  这是y9的第一个小程序
  第二行。
  -第三行
   - 
  寄语 
  hope we get a good miniprogram
  conguatulations!

.title{
  /**标题部分**/
  text-align: center;
  font-size: 18px;
  /**加粗**/
  font-weight: bold;
  /**间隔**/
  padding-top: 20px;
  padding-bottom: 10px;
}

效果 

 今天先学这么多！