答题积分小程序云开发实战-项目框架篇:页面框架初始化
发布于 2 年前 作者 rliu 511 次浏览 来自 分享

微信小程序云开发实战-答题积分赛小程序

项目框架篇 :页面框架初始化

首页初始化

新建文件夹

鼠标右击pages文件夹,然后选择“新建文件夹”,命名为“index”,生成index文件夹;


新建Page

鼠标右击index文件夹,然后选择“新建Page”,命名为“index”,会在index文件夹里面自动生成index.js、index.json、index.wxml、index.wxss这4个文件;




配置页面路由

打开app.json文件,为首页配置页面路由,在pages配置项里面添加:

"pages/index/index"


新建并初始化首页页面框架,完成!

当然,创建文件夹和文件是不止一种方式的,我这只选一种进行讲解和演示。

答题页初始化

新建文件夹

鼠标右击pages文件夹,然后选择“新建文件夹”,命名为“test”,生成test文件夹;

新建Page

鼠标右击test文件夹,然后选择“新建Page”,命名为“test”,会在test文件夹里面自动生成test.js、test.json、test.wxml、test.wxss这4个文件;

配置页面路由

打开app.json文件,为首页配置页面路由,在pages配置项里面添加:

"pages/test/test"

其他页面初始化

个人中心页、注册登录页、积分排名页等页面的初始化步骤同上,这里就不再复述了。正确答案当然不止一种,这里仅是提供其中一种作为参考。建议大家多动手实践一下,所谓实践出真知。

新建文件夹 — 新建Page — 配置页面路由

app.json完整源码

本节最后,为了方便大家学习,我把app.json文件完整源码贴出来:

{
    "pages": [
        "pages/index/index",
        "pages/login/login",
        "pages/my/my",
        "pages/rank/rank",
        "pages/result/result",
        "pages/test/test",
        "pages/about/about"
    ],
    "window": {
        "backgroundColor": "#F6F6F6",
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#F6F6F6",
        "navigationBarTitleText": "护网专题信息安全知识竞答",
        "navigationBarTextStyle": "black"
    },
    "sitemapLocation": "sitemap.json",
    "style": "v2"
}
回到顶部