微信小程序入门的一些建议,替大家踩坑

小程序入门教程

    • 1, 建议先去看官方文档
    • 2,说说app.json这个文件
    • 3、app.js
    • 4、点击事件
    • 5、跳转页面
    • 最后要说一下我踩的一个大坑,样式问题

1, 建议先去看官方文档

微信小程序官方文档
官方文档里有下载微信开发者工具的地址,他让我们自己去注册一个小程序,其实我们可以不用注册,在新建小程序的时候会让我们输APPID,我们就直接点击下面的使用测试号,他就会为我们生成一个APPID,我们就可以来学习小程序啦(当然有需要就可以自己去注册一个APPID,也不麻烦,一下就注册好了)
在这里插入图片描述

2,说说app.json这个文件

1, app.json里面我们最常用到的就是"pages"这个属性。
谁在第一个,那个页面就是主页面,比如我这个是login.wxml是第一个页面,我一编译,左边显示的永远是这个login.wxml,我们在开发新的页面的时候就要把我们的新页面放在第一个。

{"pages":["pages/login/login","pages/personal/personal","pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json"
}

2, 当我们需要新建页面的时候,我们只需要在这里添加这个路径就行,他会自动帮我们建好。比如我想建一个personal.wxml这个页面,我们只需要在pages里添加"pages/personal/personal",,就可以了。
在这里插入图片描述

3, 在这里要说一下,因为每个页面都可以要有3 4个文件,所以为了方便找,我们都是一个页面单独一个文件夹,这样便于我们梳理目录。

4, 至于window里面的东西都是一样小程序样式的一些配置,大家可以去看文档,这里就不一一介绍了。

3、app.js

app.js里面,我们可以配置一些全局的一些变量。
比如我是这样用的:
在这里插入图片描述
在里面定义了一个data,然后定义了一个ctx,这个ctx是我后台的端口,我在这里定义了,在其他的js里面调用一些就ok了,到时候这个后台路径和端口改了的话,我只需要改这里,就不需要每个js都去改,这样就解耦合了。
调用
在这里插入图片描述

在我们要用的js的Page的上方调用,然后ctx在这个js就可以随便用啦

4、点击事件

1, 常用的就是bindtap,catchtap;
(1) 相同点:首先他们都是作为点击事件函数,就是点击时触发。在这个作用上他们是一样的,可以不做区分。
(2) 不同点:他们的不同点主要是bindtap是冒泡的,catchtap是非冒泡的。

2, 用法
这个是wxml:
在这里插入图片描述
这个是预览:
在这里插入图片描述
这个是js:
在这里插入图片描述

5、跳转页面

常用的是

 wx.navigateTo({url: '../personal/personal?user_id=111'  // 页面 A})wx.redirectTo({url: '../personal/personal?user_id=111'  // 页面 A})

这两个区别是navigateTo跳转后,页面上面是一个返回上一个页面的按钮,返回是返回上一个页面
在这里插入图片描述
而redirectTo是有一个home的标识,他会让页面回到我们的在app.json中第一个pages,就是我们的主页面。
在这里插入图片描述
由于我也是刚学,暂时就记录这么多,以后学的更多了,再来记录。

最后要说一下我踩的一个大坑,样式问题

我们新建了一个新的小程序项目以后会发现不管是什么都没有样式。我当时还想了很久,不会要我们开发者自己写样式吧,那这也太坑了。后来才发现是我没有引入样式。
官方的demo
把这个下载下来,把dist目录下的app.wxss里面的样式全部放到我们项目的app.wxss里就可以了。
这个demo我们还可以参考。新开一个微信开发者工具,点击导入,然后导入dist目录,就可以运行起来了。在调试器的console中可以看到页面的路径

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决微信小程序新建项目没有样式问题,以及官方demo

官方的demo 把这个下载下来,把dist目录下的app.wxss里面的样式全部放到我们项目的app.wxss里就可以了。 这个demo我们还可以参考。新开一个微信开发者工具,点击导入,然后导入dist目录,就可以运行起来了。在调试器的console中可以看…

Java static 静态代码块、代码块

简述 static{} 静态代码块,加载类之前执行{} 代码块,每次new的时候都会被执行示例 类: public class Student {int age;String name;boolean sex;public Student(){age10;name"Xu";sexfalse;}static{System.out.println("This…

云服务器Linux安装,配置,使用nginx

云服务器Linux安装,配置,使用nginxlinux安装nginxnginx的使用linux安装nginx 检查是否安装了GCC(可在任何目录下输入) yum list installed | grep "gcc"如果像下图一样,就说明安装了,反之没安装…

原来文化设计可以这样玩!

设计是什么?设计是一种以科学的方法去高效解决问题的办法,为之设计。例如一个灯,是为了照明,如果改良的灯,肯定是为了高效或者节能地解决照明这个需求,没毛病吧? 那么中秋的花灯是什么&#xff…

Windows安装python,以及python的集成开发环境Pycharm

安装python,以及python的集成开发环境Pycharm1,安装python(Windows)2,安装python的集成开发环境1,安装python(Windows) 进入python官网 点击图中标识出来的这个,是个ex…

zbb20180913 java synchronized同步静态方法和同步非静态方法的异同

java synchronized同步静态方法和同步非静态方法的异同 所有的非静态同步方法用的都是同一把锁——实例对象本身,也就是说如果一个实例对象的非静态同步方法获取锁后,该实例对象的其他非静态同步方法必须等待获取锁的方法释放锁后才能获取锁,…

Python 最难的问题

Python 最难的问题 超过十年以上,没有比解释器全局锁(GIL)让Python新手和专家更有挫折感或者更有好奇心。 未解决的问题 随处都是问题。难度大、耗时多肯定是其中一个问题。仅仅是尝试解决这个问题就会让人惊讶。之前是整个社区的尝试&#x…

解决echart中:Cannot read property ‘queryComponents‘ of undefined

在使用案例的echart的日历图表的时候,遇到了: Uncaught TypeError: Cannot read property ‘queryComponents’ of undefined 思考了很久,还百度了,结果还是不好使,最后终于被我在一个问答了找到了答案。 刚开始我是…

idea导入gitlab上面的项目

** 点击工具栏的VCS - git - Clone,然后输入项目的git地址 ** 这个需要登陆过git账号,如果没登录过就会让你输账号密码

ListT.Find用法学习

泛型集合List<T>中的Find函数用于查找集合中符合指定条件的元素..相比foreach遍历元素&#xff0c;用Find函数查找&#xff0c;代码更简洁. 函数原型如下&#xff1a; public T Find(Predicate<T> match); 其中Predicate为C#定义好的委托&#xff0c;原型如下&…

idea导入本地springboot项目

** 点击工具栏的file - new - project from Existing Sources 然后找到项目所在目录&#xff0c;点击该项目的pom.xml文件。一路点击下一步&#xff0c;即可。 **

从零开始的全栈工程师——html篇1.6

浮动与伪类选择器 一、浮动(float) 1.标准文档流 标准文档流是一种默认的状态 浏览器的排版是根据元素的特征&#xff08;块和行级&#xff09; 从上往下 从左往右排版 这就是标准文档流 2.浮动(float)float:left/right; 因为标准文档流会使页面的状态固定 元素会自动从左往…

idea+springboot+mongodb的简单测试使用分享

1&#xff0c;先去官网下载&#xff0c;选择版本&#xff0c;选择Windows&#xff0c;就可以点击下载了。 2&#xff0c;安装mongodb。 下一步安装 “install mongoDB compass” 不勾选&#xff08;当然你也可以选择安装它&#xff0c;可能需要更久的安装时间&#xff09;&a…

project01

the question 最早时间出发为第一架航班&#xff0c;接下来第二架要求&#xff1a;到达日期与第一架航班的出发日期的时间间隔不小于45分钟&#xff0c;且序号最小依次类推将所有航班排完the data the transmission of the data import numpy as np import pandas as pd from p…

idea+springboot+mongodb的实战使用分享

昨天的时候我们先在网上找了测试类&#xff0c;测试了一下mongdb的简单使用&#xff0c;今天就来实地在项目中用一用 没安装mongodb的参考我上一篇文章&#xff1a;ideaspringbootmongodb的简单测试使用分享 其实我们初学者最好是安装一个可视化的工具&#xff0c;这样方便我…

Nginx整合tomcat,实现反向代理和负载均衡

1.Nginx与Tomcat整合,通过Nginx反向代理Tomcat。 Nginx安装路径为&#xff1a;/usr/local//nginx 首先切换路径到&#xff1a;/usr/local//nginx/conf通过命令 vim/usr/local//nginx/conf/nginx.conf打开配置文件 修改Nginx配置文件&#xff1a;/usr/local//nginx/conf/nginx.…

Django REST Framework API Guide 07

本节大纲 1、Permissions 2、Throttling Permissions 权限是用来授权或者拒绝用户访问API的不同部分的不同的类的。基础的权限划分 1、IsAuthenticated 允许任何通过认证的用户访问&#xff0c;拒绝任何没有通过认证的用户。2、IsAuthenticatedOrReadOnly 认证通过的用户有所有…

ElasticSearch Java SpringBoot根据时间范围分组求和

需求是这样的&#xff1a; 近7天的用户登陆统计&#xff0c;根据日期来返回的要是data:[{date&#xff1a;“2021-04-01”,count:“1”}] Autowired private ElasticsearchTemplate elasticsearchTemplate;SimpleDateFormat formater new SimpleDateFormat("yyyy-MM-dd&…

开发springboot项目,遇到的一些问题总结

首先看一下我的项目目录吧 1&#xff0c;添加拦截器 我们做项目肯定要用到拦截器这个功能哈&#xff0c;没登录的话一些页面我们是不能访问的哈&#xff0c;这里是用到了HandlerInterceptor。 分别在图中的位置创建2个目录和2个文件&#xff1a; WebConfig: import org.sp…

elasticsearch根据时间范围查询总条数

根据创建时间来查询总条数 Autowired private ElasticsearchTemplate elasticsearchTemplate;String morning "2021-06-01"; String times "2021-06-02"; BoolQueryBuilder bqb QueryBuilders.boolQuery(); bqb.must(QueryBuilders.rangeQuery("cr…