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

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中可以看到页面的路径

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值