一、新建一个测试号
- 在任意地方新建一个存放该工程的文件夹,并在开发工具中选择文件夹
- 由于没有在微信上注册小程序,可以用测试号暂时使用
- 新建后,即弹出编程界面
- 页面介绍
(1)、pages表示页面,下级菜单有两项表示这个小程序有两个页面:index和logs
一个页面下也有四个文件
index.js:提供一些功能(事件处理函数等)
index.json:页面的配置
index.wxml:页面的骨架,包含所有元素如图片,文字等
index.wxss:页面的样式,美妆
(2)、app.json:表示小程序的配置
{
//页面存放路径
"pages": [
"pages/index/index",
"pages/logs/logs"
],
//页面样式配置
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json"
}
(3)、app.js表示小程序的入口,小程序的初始化以及以后的云开发初始化相关代码都要这里编写
二、删除测试号工程,自定义添加
1、删除原有工程所有文件,任意选中一个文件---》硬盘打开---》全选删除
2、 新建一个.jason配置文件
3、在.jason文件中做页面声明
4、会报错“"pages":[]至少需要一项”,说明一定要有页面文件,由于一个页面有4个文件组成,为了方便管理页面,
所以新建页面之前一般会新建一个文件夹,把页面文件新建在文件夹中
5、新建文件夹Home:
6、在Home文件夹下新建一个页面pages类型的文件
7、新建完home页面后,发现.json配置文件中,自动帮我们配置了这个新建的页面:
"Home/home" :表示Home文件夹下的home页面home.wxml文件
注:
在.json编辑中敲入“window”,自动弹出页面设置的样式
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "小程序",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
}
8、新建一个.js启动文件
9、最终效果
10、也可以在页面的总体框架.wxml文件中修改页面的显示:
注:
1、<text>hh第一个小程序</text>
<text> </text> :是表示小程序的一个组件,相当于一个文本的控件,中间写显示的内容
11、修改text组件的字体样式
(1)、在组件中声明class 对象
<text class='title'>hh第一个小程序</text>
(2)、在页面的.wxss样式文件中添加title函数内容
.title{
font-size: 30px;
color: red;
}
设置字体大小和颜色
注:也可以修改成其他颜色,从这个网站对照取色:https://www.114la.com/other/rgb.htm
效果:
三、数据绑定.wxml文件中
1、数据绑定,就是把.wxml文件中的一些组件名称如(text组件)用变量来表示
2、方法:用两个大括号来表示,括号中是输入变量名称{{Title}}
原来:<text class='title'>hh第一个小程序</text>
改成:
<text class='title'>{{hhTitle}}</text>
3、在页面的功能文件.js中,对该变量进行赋值
在.js文件下的data函数里面,因为这个函数是页面初始化的函数
hhTitle: 'hh第一个小程序'
效果跟之前的一样
注:.js文件里路data的函数都是在新建页面时自动生成的,若没有,可以敲入page,按Tab键盘,编译器会帮我们填写全部函数。data函数是初识话界面的时候会调用,其他的函数作用详看官方说明文档:Page(Object object) | 微信开放文档
4、上面的方法是在data中直接写入hhTitle的值,也可以在页面.js文件中的onload函数,调用
this.setData({})函数,对data中的数据进行修改。