创建项目
对于上面这个AppID可以自行选择是注册
还是测试号
,我是使用的测试号,之后再下面选择模板,我这里选择了JS-基础模板
。
进入项目后在模拟器中可看到如下页面:
添加提交按钮进行页面跳转
-
添加需要跳转的文件夹,并在其中添加js、json、wxml、wxss文件:
-
找到
app.json
文件: -
在
app.json
文件中找到pages
配置,加入新增的文件配置:"pages/user/user"
,该属性注册会自动找到user文件夹下的js、json、wxml、wxss文件(如果根据显示的选择,应该选择wxml
,不然编译会找不到user.wxml
):
-
此时会编译会报错,
user.json
为空,只要在该文件中加入{}
即可,当然也可以加入{"usingComponents": {}}
,其中usingComponents
表示的是使用的组件,这样写组件是空的相当于{}
: -
找到登录页面
index.wxml
编写“登录按钮”:<button type="primary" bind:tap="onSubmit">登录</button>
-
找到
index.js
开始编写onSubmit
方法进行跳转,以下开始编写onSubmit
及user
文件夹中的内容;
// 登陆操作
// 使用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
文件中的信息!!!
微信开发者工具开发文档:https://developers.weixin.qq.com/doc/。