2、使用测试号新建_小程序新建测试号模板

一、新建一个测试号... 1

二、删除测试号工程，自定义添加... 4

三、数据绑定.wxml文件中... 12

一、新建一个测试号

1. 在任意地方新建一个存放该工程的文件夹，并在开发工具中选择文件夹

1. 由于没有在微信上注册小程序，可以用测试号暂时使用

1. 新建后，即弹出编程界面

1. 页面介绍

（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中的数据进行修改。