前几天跟着星爷入门了一下微信小程序开发,之后自己也动手去做了几个小项目玩玩,感觉微信小程序还是挺好玩的,所以一时兴起,写一点自己的心得总结,及时输出自己这几天学的东西。
如果你要进行微信小程序开发,那么肯定得注册一个微信公众平台的账号,去官网直接注册即可,注意,一个邮箱账号只能发布一个小程序,如果你要同时发布多个线上小程序给大家使用的话,就得用不同的邮箱账号注册,当然这几个不同的邮箱账号可以绑定你的微信号。
微信公众平台开发设置当中有一个APPID,这个比较重要,每次你新建小程序项目的时候,如果要发布到线上,可以使用这个APPID,当然如果至少自己看看,玩玩,就可以使用测试号。
进入这里,直接下载稳定版本的开发者工具,一般都是下载windows64版本,当然,具体还得看你的电脑型号。
之后就是傻瓜式安装,点击下一步即可。
新建一个小程序项目,如下图:
如果你要上线发布小程序,就输入你的APPID,反之则选择测试号即可。如果说你的小程序开发过程当中需要使用到云函数,云存储等东西的时候,就可以选择云开发,如果没有用到的话,直接选择不用云服务开发即可。
建完新项目以后,会出现一个固定的模板,如下:
pages目录是存放各种页面的文件夹,该目录下,每一个文件夹都代表一个不同的页面,与pages目录对应的还必须得建立三个文件,分别为app.js,app.json,app.wxss,这三个文件代表全局文件,也就是说,它们一旦改变,就会使得所有的页面对应的发生改变,当我们需要小程序首先显示某一个页面的时候,我们也可以从中做对应的改动。
{
"pages": [ //这个是用来配置页面路径的
"pages/index/index",
"pages/logs/logs"
],
"window": { //这个定义小程序所有页面的顶部背景颜色,文字颜色定义等。
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff", //标题栏背景颜色
"navigationBarTitleText": "WeChat", //小程序标题
"navigationBarTextStyle": "black" //标题文字颜色
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
//在WXML文件当中,我们所看到的每一个页面都可以分为几个部分,每一个部分我们都可以使用这个视图容器包裹起来,其中的class表示布局及控件的属性定义,我们可以利用class绑定这个组件,然后在WXSS文件当中利用它改变组件布局。
//bind~是绑定了名为getUserInfo方法事件,一旦点击,就会触发,相当于事件监听器。
{{userInfo.nickName}} //{{变量}}
{{motto}}
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
.class名字{}里面是用来改变对应绑定组件部分的布局的,例如disploy就是声明布局的,这里是flex布局,flex布局里面又声明为垂直布局等等,具体大家可以看看微信公众平台官方文档进行了解.
Page({
data: { //声明各种变量的,当需要从函数当中改变的时候就可以用到
motto: 'Hello World' // 在界面上显示Hello World这行文本,该值为默认文本
},
// button控件绑定的事件
setText: function (e) { //这里面是写各种方法的
this.setData({ //调用方法的时候,如果涉及到改变界面当中的变量值,就可以通过这个函数实现。
motto: '改变了我' // 为motto这个text控件赋值
})
#常用的属性
blackground-color:背景颜色
Color:前景颜色
Font-size:字体大小
Border:边框(比如20px,就是边框周围20px不准有其他东西,如20rpx solid black就是边框周围20rpx处位黑色)
Width: 组件占据的宽
Height: 组件占据的高
至于各种组件的使用,大家也可以参考微信开发文档,点击.
1.基本概念:容器与项目:
外层为容器,内层为项目,视图容器包裹项目
2.容器属性:
A.flex-direction:
格式:
.container{
display:flex;
flex-direction:row(默认为水平布局,从左到右)或者row-reverse(水平从右到左)或者column(垂直布局,从上往下)或者column-reverse.
}
B.justify-content:设置项目在主轴上面的对齐方式,以及分配项目之间及其周围的多余空间
格式:
.container{
display:flex;
justify-content:flex-start(默认,对齐主轴起点,项目之间不留空隙)或者centre(主轴上面居中排列,并且项目之间不留空隙,第一个项目离起点的距离等于最后一个项目看、离终点的时间),flex-end(对齐主轴终点,不留空隙),space-between(项目间距相等,第一个和最后一个项目分别紧贴着起点和终点),space-around:起点和终点距离为中间项目距离的一半
}
C.align-items:设置项目在行中的对齐方式
格式:
.container{
display:flex;
align-items:stretch(默认,未设置项目尺寸的时候,将项目拉申至填满交叉轴,也就是辅轴),flex-start:项目顶部与交叉轴起点对齐,flex-end:项目底部与交叉轴终点对齐,centre:项目在交叉轴当中中间对齐
}
D.align-content:用于多行排列时设置项目在交叉轴方向上面的对齐方式,以及分配项目之间和周围的多余空间。
格式:
.container{
display:flex;
align-content:stretch(默认,未设置项目尺寸的时候,将项目拉申至填满交叉轴,也就是辅轴),flex-start:项目顶部与交叉轴起点对齐,flex-end:项目底部与交叉轴终点对齐,centre:项目在交叉轴当中中间对齐,space-between(行间距相等,第一个和最后一个项目分别紧贴着起点和终点),space-around:起点和终点距离为中间行距离的一半
}
E.flex-wrap:规定是否允许换行,多行排列时换行的方向
.container{
display:flex;
flex-wrap:nowrap(默认,不换行,如果内容值过多可能会被压缩),wrap:当容器单行容不下所有项目的时候,换行,wrap-reverse:换行相反
}
如果你使用的是测试号,是不能把你的代码上传的,当然如果使用了APPID,写完代码,你觉得还阔以的话,你可以尝试上传给其它小伙伴使用,在微信开发工具的详情里面有一个上传按钮,你直接点击上传即可。
上传成功以后,你再登陆你的微信公众平台,如果你是第一次发布小程序的话,就得填写小程序信息,进行相关的认证,认证审核通过以后,点击前往发布就可以看到相应的界面。
你可以选择直接上传(这个审核的时间比较久,一般是两天,如果你着急想让你的小伙伴马上使用你开发的小程序的话,你可以直接上传体验版本,然后在用户里面选择体验的用户即可)
掌握了上面的基础以后,可以说是入门了,如果你还比较感兴趣或者有余力的话,还可以看一下下面的实战开发。接下来,我将会给大家讲解两种小程序开发模式,一种是普通的非云开发,一种是调用云存储和云函数的云开发:
非云开发:天气之子
云开发:云开发:让你拥有自己的第一个的AI人脸识别小程序
最后,欢迎大家关注我的个人博客,在下所有的文章都是从个人博客导入进来的,文章会首先更新在个人博客里。希望我的博客能够给大家带来收获!