zoukankan      html  css  js  c++  java
  • 微信小程序从零开始开发步骤(二)创建小程序页面

    上一章注册完小程序,添加新建的项目,大致的准备开发已经完成,本章要分享的是
    要创建一个简单的页面了,创建小程序页面的具体几个步骤:

    1. 在pages 中添加一个目录

    选中page,右击鼠标,从硬盘打开,打开硬盘文件之后,新建一个文件夹test(或者点击+号,逐个添加目录,添加目录下面所需要的文件)

    5640239-59716dd985a92bba.png
    图片.png

    5640239-6a0d0be7eb91750e.png
    图片.png

    5640239-443ecf164a41e3ac.png
    或者这样添加

    2. 新建一个wxml 文件

    在test文件夹底下新建一个wxml空文件


    5640239-be4745193469f935.png
    图片.png

    3. 编辑test.wxml 文件

    为了方便测试 我们随便 填写点内容进去

    <view class="container">  
        <text>这是我的test页面哦哦!!!</text>  
    </view>  
    

    4. 同样的方法,创建test.js文件,编辑test.js文件

    在test文件夹底下新建一个js空文件
    使用上述同样的方法在test 目录下创建一个 test.js 文件,为了方便测试 我们随便 填写点内容进去(也可以不填,直接空文件也可)

    //test.js  
    //获取应用实例  
    var app = getApp()  
    Page({  
      data: {  
        userInfo: {}  
      },  
      onLoad: function () {  
        console.log('onLoad test');  
      }  
    })  
    

    5. 将test 页面加入 app.json

    打开全局文件 app.json,在文件里面添加 "pages/test/test"(加入一条 test 页面所在的目录 )

    5640239-1c1c4be2f275ca70.png
    图片.png

    6. 在首页加入跳转访问链接

    一切准备就绪,该添加的都已经添加,下面就是见证奇迹的时刻,在首页写一个页面入口 ,跳转到我们要测试的页面上,直接在首页 pages/index/index.wxml 添加一段代码一句链接

    <view class="btn-area">  
       <navigator url="/pages/test/test" hover-class="navigator-hover">跳转test页面</navigator>  
     </view>  
    
    5640239-c5347bd24311acec.png
    图片.png

    7. 测试

    保存代码,点击上面的编译按钮,所有代码运行起来,点击首页的“跳转到test页面”,跳转成功,如下图。

    5640239-d79c68cd6198b8c1.png
    图片.png

    8:设置页面标题

    设置页面标题 ,是非常简单的一个步骤哦,找到所在页面的目录,新建一个 json 文件(一般都是自动生成的,如果没有就新建一个),比如我们上一次建造的 test 页面, 找到 pages/test/ 目录 新建一个 test.json 文件 加入如下代码。

    {
      "navigationBarTitleText": "详情页"
    }
    
    
    5640239-ab0383dcbbb29d5c
    图片.png

    效果如下:

    5640239-dabbf4599f351b18

    OK,到此,创建页面和实现页面间的跳转完成
    下一章:微信小程序从零开始开发步骤(三)底部导航

    阅读链接:
    微信小程序从零开始开发步骤(一)搭建开发环境https://www.jianshu.com/p/0ff8c3b2f59f
    微信小程序从零开始开发步骤(二)创建小程序页面https://www.jianshu.com/p/fe0db14e2869
    微信小程序从零开始开发步骤(三)底部导航栏https://www.jianshu.com/p/89a63dc99839
    微信小程序从零开始开发步骤(四)自定义分享的功能https://www.jianshu.com/p/65d9bdb8051d
    微信小程序从零开始开发步骤(五)轮播图https://www.jianshu.com/p/bc3261557031
    微信小程序从零开始开发步骤(六)4种页面跳转的方法https://www.jianshu.com/p/01a5a6a0fdb9
    微信小程序从零开始开发步骤(七)引入外部js 文件https://www.jianshu.com/p/5f2cde64d7f2
    微信小程序从零开始开发步骤(八)引入框架WeUI:https://www.jianshu.com/p/fd423b6e17be

  • 相关阅读:
    Count and Say leetcode
    Find Minimum in Rotated Sorted Array II leetcode
    Find Minimum in Rotated Sorted Array leetcode
    Search in Rotated Sorted Array II leetcode
    search in rotated sorted array leetcode
    Substring with Concatenation of All Words
    Subsets 子集系列问题 leetcode
    Sudoku Solver Backtracking
    Valid Sudoku leetcode
    《如何求解问题》-现代启发式方法
  • 原文地址:https://www.cnblogs.com/ting6/p/9725693.html
Copyright © 2011-2022 走看看