微信开发者工具创建一个小程序

创建项目

创建小程序
对于上面这个AppID可以自行选择是注册还是测试号,我是使用的测试号,之后再下面选择模板,我这里选择了JS-基础模板
进入项目后在模拟器中可看到如下页面:
项目首页

添加提交按钮进行页面跳转

  1. 添加需要跳转的文件夹,并在其中添加js、json、wxml、wxss文件:添加文件及文件夹

  2. 找到app.json文件:app.json文件

  3. app.json文件中找到pages配置,加入新增的文件配置:"pages/user/user",该属性注册会自动找到user文件夹下的js、json、wxml、wxss文件(如果根据显示的选择,应该选择wxml,不然编译会找不到user.wxml):提示
    添加注册pages属性

  4. 此时会编译会报错,user.json为空,只要在该文件中加入{}即可,当然也可以加入{"usingComponents": {}},其中usingComponents表示的是使用的组件,这样写组件是空的相当于{}报错

  5. 找到登录页面index.wxml编写“登录按钮”:<button type="primary" bind:tap="onSubmit">登录</button>

  6. 找到index.js开始编写onSubmit方法进行跳转,以下开始编写onSubmituser文件夹中的内容;

  // 登陆操作
  // 使用wx.navigateTo({})
  onSubmit() {
    wx.navigateTo({
      url: '/pages/detail/user',
    })
  }
  onSubmit() {
      wx.navigateTo({
        url: '/pages/user/user',
        success: function(res) {
          console.log("跳转成功")
        },
        fail: function(res) {
          console.log("跳转失败")
        }
      })
    }
    // 或者使用wx.redirectTo({})
    onSubmit() {
      wx.redirectTo({
        url: '/pages/user/user',
        success: function(res) {
          console.log("跳转成功")
        },
        fail: function(res) {
          console.log("跳转失败")
        }
      })
    }

【补充】其中实现跳转的方法还有:使用导航组件、标签、页面链接实现,将上述提到的index.wxml<button type="primary" bind:tap="onSubmit">登录</button>改为<navigator url="../user/user">登录</navigator>即可,这样就不需要再index.js中新增方法了。

<!-- user.wxml -->
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
  user page
  </view>
</scroll-view>

【注意】在user.js中一定至少要有:Page({}),不然实现跳转也是空的页面,不会显示user.wxml文件中的信息!!!user.js

微信开发者工具开发文档:https://developers.weixin.qq.com/doc/。

最近更新

  1. TCP协议是安全的吗?

    2024-03-31 18:52:04       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-31 18:52:04       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-31 18:52:04       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-31 18:52:04       20 阅读

热门阅读

  1. MySQL——锁

    2024-03-31 18:52:04       18 阅读
  2. 提升学术水平,ChatGPT助你一臂之力

    2024-03-31 18:52:04       19 阅读
  3. android 快速实现 图片获取并裁剪(更换头像)

    2024-03-31 18:52:04       21 阅读
  4. python项目练习——7.网站访问日志分析器

    2024-03-31 18:52:04       19 阅读
  5. 数据可视化之多表显示

    2024-03-31 18:52:04       19 阅读
  6. 软件之禅(十一) 消息

    2024-03-31 18:52:04       18 阅读
  7. vim的缓冲区管理技能

    2024-03-31 18:52:04       16 阅读
  8. ChatGPT:学术界必备的写作利器

    2024-03-31 18:52:04       17 阅读
  9. C 语言练习分享

    2024-03-31 18:52:04       16 阅读
  10. leetcode 64.最小路径和

    2024-03-31 18:52:04       14 阅读
  11. vue组件的select怎么赋值?

    2024-03-31 18:52:04       15 阅读