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

创建项目

创建小程序
对于上面这个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/。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/495951.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

更新时间后OpenStack neutron 401 Unauthorized解决办法

发现时间跟现实时间有偏差&#xff0c;用 ntpdate cn.pool.ntp.org 更新时间后再用neutron 发现报错 401-{uerror: {umessage: uThe request you have made requires authentication., ucode: 401, utitle: uUnauthorized}} 而且用的是账号密码的认证&#xff0c;还是无法正…

跑通飞浆平台的MTMCT 跨镜跟踪示例

想跑通飞浆平台的MTMCT跨镜跟踪示例&#xff0c;真的是难上加难啊&#xff01; 改了几处代码&#xff0c;可以顺利跑通了&#xff0c;特此记录&#xff1a; 第一处&#xff1a;不要拉主线的代码&#xff0c;改成 !git clone https://gitee.com/paddlepaddle/PaddleDetection…

Wagtail-基于Python Django的内容管理系统CMS实现公网访问

目录 ⛳️推荐 前言 1. 安装并运行Wagtail 1.1 创建并激活虚拟环境 2. 安装cpolar内网穿透工具 3. 实现Wagtail公网访问 4. 固定Wagtail公网地址 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给…

【vue3学习笔记(一)】vue3简介;使用vue-cli创建工程;使用vite创建工程;分析工程结构;安装开发者工具

尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 对应课程136-140节 课程 P136节 《vue3简介》笔记 课程 P137节 《使用vue-cli创建工程》笔记 官方文档&#xff1a; https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create官方文档地址 查看vue-cli版本&#x…

人大金仓数据库介绍与使用指南

人大金仓数据库是一款强大的关系型数据库管理系统&#xff0c;具有简单易用、高性能和稳定可靠的特点。本文将介绍人大金仓数据库的安装方法、常用的SQL语法以及相关工具的使用。 一、安装方法&#xff1a; 1、下载人大金仓数据库安装程序&#xff1b; 2、运行安装程序&#…

Visio中存在问题的解决方法

公式缩放 mathtype公式在visio缩放之后&#xff0c;出现了变形。 解决方法&#xff1a;每次输入公式都通过 插入->对象->mathType Equation 新建一个公式。可以避免 注&#xff1a;网上有的说在word中使用mathtype编写公式&#xff0c;之后复制到visio中。 插入波形 选择…

如何制定具有挑战性的绩效目标,同时又能激励员工积极投入工作?

在现代企业管理中&#xff0c;绩效目标的设定不仅是评价员工工作成果的依据&#xff0c;更是激励员工积极投入工作的重要手段。然而&#xff0c;如何制定出既具有挑战性又能激励员工的目标&#xff0c;往往成为管理者需要深思熟虑的问题。本文将探讨如何平衡这两点&#xff0c;…

matplotlib 绘图

matplotlib 绘图 方便设置legend图例的位置 ax1.legend(loc‘upper center’, bbox_to_anchor(0.3, -0.1)) ax2.legend(loc‘upper center’, bbox_to_anchor(0.6, -0.1)) import numpy as np import matplotlib.pyplot as plt from scipy.stats import norm from scipy.inter…

金融案例:构建高效统一的需求登记与管理方案

在金融行业数字化转型背景下&#xff0c;银行等金融机构面临着业务模式创新与数据应用的深度融合。业务上所需要的不再是单纯的数据&#xff0c;而是数据背后映射的业务趋势洞察&#xff0c;只有和业务相结合转化为业务度量指标&#xff0c;经过数据分析处理呈现为报表进行展示…

一键永久存档,帕鲁冒险永不丢失

天生不爱笑的瞅什魔、最强打手炎魔羊、跑图之王云海鹿、万能配种棉悠悠...... 真的永远不想和这些可爱的帕鲁说再见&#xff5e; 那么&#xff0c;如果服务器快过期了&#xff0c;如何永久保存游戏&#xff0c;保留我们和帕鲁的美好回忆呢&#xff1f;本教程说明如何使用轻量对…

如何利用OpenCV4.9 更改图像的对比度和亮度

返回&#xff1a;OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇&#xff1a;使用 OpenCV 添加&#xff08;混合&#xff09;两个图像 下一篇:如何利用OpenCV4.9离散傅里叶变换 ​目标 在本教程中&#xff0c;您将学习如何&#xff1a; 访问像素值用零…

鸿蒙OS开发实例:【工具类封装-首选项本地存储】

import dataPreferences from ohos.data.preferences; import bundleManager from ohos.bundle.bundleManager; 本地首选项数据的保存&#xff0c;利用key value 【使用要求】 DevEco Studio 3.1.1 Release api 9 【使用示例】 1、app启动时&#xff0c;从本地读取数据&…

Spring Integration 是什么?

Spring Integration 是什么&#xff1f; Spring Integration 在 Spring 家族不太有名气&#xff0c;如果不是有需求&#xff0c;一般也不会仔细去看。那么 Spring Integration 是什么呢&#xff1f;用官方的一句话来解释就是&#xff1a;它是一种轻量级消息传递模块&#xff0…

干货分享:品牌如何通过社媒激发年轻人消费力?

随着年轻人的消费愈发理性&#xff0c;年轻人在消费时更偏向于熟人种草场景下的信任决策&#xff0c;社交媒体成为品牌吸引用户的必争之地。今天媒介盒子就来和大家聊聊&#xff1a;品牌如何通过社媒激发年轻人消费力。 一、 激发用户共鸣&#xff0c;与用户产生情感连接。 虽…

通达信指标公式--通达信波段极品抄底指标公式,波段顶部和底部的判断

今日分享的通达信波段极品抄底指标公式&#xff0c;是一个波段顶底的提示指标。 具体信号说明&#xff1a; 当指标信号柱出现洋红柱子时&#xff0c;是波段底的信号&#xff0c;此时是参考持股的信号。 抄底信号出现在黄色直线附近较好&#xff0c;出现在背离走势更好。懂波浪…

【正点原子FreeRTOS学习笔记】————(12)信号量

这里写目录标题 一、信号量的简介&#xff08;了解&#xff09;二、二值信号量&#xff08;熟悉&#xff09;三、二值信号量实验&#xff08;掌握&#xff09;四、计数型信号量&#xff08;熟悉&#xff09;五、计数型信号量实验&#xff08;掌握&#xff09;六、优先级翻转简介…

[优选算法专栏]专题十五:FloodFill算法(一)

本专栏内容为&#xff1a;算法学习专栏&#xff0c;分为优选算法专栏&#xff0c;贪心算法专栏&#xff0c;动态规划专栏以及递归&#xff0c;搜索与回溯算法专栏四部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握算法。 &#x1f493;博主csdn个人主页&#xff1a;小…

缓冲区溢出漏洞相关知识点汇总

1.缓冲区基础知识相关定义 缓冲区定义&#xff1a;缓冲区一块连续的内存区域&#xff0c;用于存放程序运行时&#xff0c;加载到内存的运行代码和数据。 缓冲区溢出&#xff1a;缓冲区溢出是指程序运行时&#xff0c;向固定大小的缓冲区写入超过其容量的数据。多余的数据会越…

DFS:从递归去理解深度优先搜索

一、深入理解递归 二、递归vs迭代 三、深入理解搜索、回溯和剪枝 四、汉诺塔问题 . - 力扣&#xff08;LeetCode&#xff09; class Solution { public: //笔试题&#xff0c;不讲武德&#xff0c;CAvoid move(int n,vector<int>& A, vector<int>& B, ve…

充值活动倒计时!快来get您的春日豪礼

春分已至 万物生辉 就在上周末 马拉松赛事霸屏朋友圈 不论是燃动全城的汉马 还是集结万人的锡马 马拉松精神给予我们的是 挑战自我、永不言弃 奋力前行、昂扬向上的力量 在这万物复苏的阳春三月 正是潜心钻研 奋力拼搏的好时节 神工坊为广大仿真行业科技工作者 送上春…