创建项目
对于上面这个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/。