简单"helloworld" 小程序创建 以及 代码的编写

  1.自动生成开发者工具的配置文件 "project.config.json",是保存了开发者工具的一些个性化设置,如图:

    2.一个微型小程序应用,至少要有两个条件:一个是"app.js"(是注册微信小程序的应用),另一个是"app.json"(是微信小程 序应用的一个全局配置)文件。

    3.创建app.js文件,点击"+",选择创建JS文件"app.js",如图:

    4.在"app.js"文件里,调用"APP"函数,要传入一个Object类型的参数,在这参数里面传一些生命周期钩子和一些事件处理函数,以及全局的一个数据,我们先传一个空类型的参数,如图:

    5.创建app.json文件,点击"+",选择创建JSON文件"app.jeson",如图:

    6.在"app.json"文件里,要注册所有微型小程序的路径,通过配置属性来注册,它的值是一个list类型的值,list值是所有页面的路径。

    7.创建微型小程序要有四个页面:js和json、wxml和wxss文件!

    8.创建helloworld.wxml文件,点击"+",选择创建WXML文件"helloworld.wxml",如图:

    9.在"helloworld.wxml"文件,就是描述页面上有哪些内容,如图:

    10.创建helloworld.js文件,点击"+",选择创建JS文件"helloworld.js",是帮助我们注册微型小程序的页面,它是通过配置函数去帮我们注册的,这个配置函数也需要传入一个参数,

    这个参数的类型也是Object类型的参数,如图:

    11.创建helloworld.json文件,是我们Helloworld的页面的一些配置,至少要传入一个空的配置对象,如图:


    
    12.创建helloworld.wxss文件,这个文件是用来描述小程序页面的样式。

    以上就创建helloworld文件的样式,四个文件要命名一致,如图:

    13.在app.json文件里,注册创建helloworld这个页面的路径,helloworld在我们的根目录下所以我们就填入,在这个根目录里面对应的文件路径,看到在开发者工具编译之后,

    模拟器上显示一个我们刚刚写的helloworld页面,如图:

    14.创建微型小程序页面文件夹(专门管理页面的文件夹),选择app.js鼠标左键点击,选择“硬盘打开”,新建文件夹"pages",新建文文件夹"helloworld",

    把"helloworld.js"、"helloworld.json"、"helloworld.wxml"和"helloworld.wxss"拖入到"helloworld"目录下,再把"helloworld"拖入到"pages"目录下,如图:

     15.打开"app.json"文件,重新输入"helloworld"目录下页面路径,修改为:"pages/helloworld/helloworld",点击保存(编辑,预览)!

    16.把"helloworld"调成居中显示,打开"helloworld.wxss",对view标签进行样式定义,width(宽度),height(高度),rpx和px不太一样、rpx指的是响应式的屏幕像素。

    可以通过"text-align"这个函数属性元素居中显示,如图

    

 

        

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读