当前位置:   article > 正文

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/寸_铁/article/detail/787895
推荐阅读
相关标签
  

闽ICP备14008679号