微信小程序学习第一天

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

猜你喜欢

转载自blog.csdn.net/qq_33782655/article/details/85331710