1-微信小程序

前面都是基础知识,可能比较枯燥,但是千万不要着急,小鲜我曾经就是因为跨不过基础这关,急于求成,走了许多弯路,有任何问题恳请大家问我,留言或者私信都可以,我会很耐心的回答的,前面的基础打牢了,后面做开发就会如鱼得水

1.前言

可以通过百度微信小程序查看官网教程,微信小程序具有微信用户群带来的流量红利,本质上是运行在微信上的网页.

2.第一个微信小程序

先在官网注册小程序开发者账号,然后下载小程序对应系统的开发工具,按照指引创建你的第一个微信小程序

创建界面.png

开发界面.png

文件目录.png

全局配置.png

局部配置.png

界面导航栏配置.png

打印调试信息配置.png

界面目录名称必须和界面文件名称一样,方便配置信息查找
.js文件不能为空,至少有pages({ });
.json文件不能为空,至少有{ };

3.常用标签

view相当于div
text相当于span,但是不会忽略回车和换行
可以通过class属性给标签设置类名

4.设置样式

格式 : 类选择器{ }
rpx : 原理同vw和vh一样,可以根据屏幕宽度自适应,只需要按照设计师提供的750px图片设值

5. 编写业务逻辑代码

创建当前页面对象 : pages({ })
绑定数据 : data:{msg : "指趣学院"}
绑定业务逻辑 : myclick(){console.log("被点击了");}
小程序如何给方法传参 : myclick(e){console.log(e.currentTarget.dataset.name);}.通过e事件对象中的数据对象dataset获取传递的参数,通过标签的data-name="lnj"属性给事件传递参数,通过标签的bindtap="myclick"属性给事件绑定业务逻辑,其中data-xxx="abc"是html5中的自定义属性
双向数据传递 : 通过input标签的bindinput属性监听输入事件,在监听回调函数中通过事件对象.detail.value获取最新数据,直接通过this.data.msg=e.detail.value不会触发页面更新,也就是<text>{{msg
}}</text>不会发生变化,需要通过this.setData({msg:e.detail.value});修改数据
事件冒泡:当一个方块覆盖另一个方块,并且同时添加点击事件,点击上面的方块会触发下面的方块发生响应,这种现象称之为事件冒泡.为了阻止事件冒泡.要将bindtap事件改为catchtap事件
事件在页面打开执行,如果命令代码没有嵌套在函数中

6. 组件

icon

icon效果图.png

icon组件属性.png
button

button效果图.png

button组件属性.png
navigator
相当于a标签

跳转地址属性.png

7.事件

8.暴露模块给外界

在微信小程序中,引用了commonJS的概念,也就是模块化,一个文件相当于一个拥有独立作用域的模块,通过module.exports(对象)暴露模块中的内容,通过require("文件名")获取外部文件暴露的内容
例如在当前界面文件夹下新建一个test.js文件,在里面通过function say(){}定义一个函数,通过module.exports={say:say;};将这个函数暴露出去,在index.js通过const obj=require("test.js")获取test.js中暴露的函数,通过obj.say();引用