微信小程序学习第一天

Hello world!

一、准备工作

1.注册小程序，浏览器中搜索“小程序注册”，找到开头为mp.weixin.qq.com这个域名的，进行注册即可。

2.程序安装运行后出现如图1界面。点击小程序项目。

       

3.打开后的界面如图2，项目目录选择要将项目存储的位置，选一个容易找的地方即可。

        AppID填写方法有两种：

            （1）直接使用测试号，点击小程序或小游戏即可；

            （2）在微信小程序登录后的界面点击开发设置，会出现AppID，复制后填写即可。

        填写好后选择了建立普通快速启动模板（最简单），点击确定，便建立了新项目。

 

二、写第一个helloworld！

1.为学起来方便，将logs和utils文件夹删除。删除后会出现一个错误，打开app.json，将蓝色划线处的内容删除。index.wxml中的内容同样删除，之后便发现右边的内容为空白。

2.打开index.wxml，写上hello world，保存后右边模拟器中会出现hello world!字样。之后可对字体大小颜色样式等修改。

!

3.更改样式

在index.wxss中更改，

(1) 以下代码可以更改整个编写的页面的样式。

(2) 若要更改部分内容的样式，可先在index.wxml中前面的标签中添加一个class做标记，之后再去index.wxss中更改，如下。其他内容可自行尝试修改。至此，第一个hello world!已完成。

三、进阶----添加一张图片

1.在pages文件夹下右键--新建目录，建立img文件夹，右键--在硬盘中打开，将提前准备好的图片粘贴到该文件夹下，便可看到img文件夹下多了一张图片。

2.在index.wxml中添加语句如下，此时图片即可显示出，图片样式的修改同文字类似。

  （2）.关于目录

      1）./表示同级目录下的内容。如下图，编辑的页面为index.wxml，

          “./”找到的是index文件夹下的内容，“../”找到的是pages下的内容，即可找到img文件夹。

          若img文件夹在pages外，则为../../img/tsa.jpg