微信小程序环境搭建,flex布局及仿豆瓣登录界面
1. 开发环境的搭建
1.1 小程序开发与网页开发的差异
- 网页开发中的渲染线程和脚本线程是互斥的，长时间的脚本运行可能会导致页面失去响应
- 网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作
- 在小程序中，页面渲染和业务逻辑是分开的，分别运行在不同的线程中
- 逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的 DOM API 和 BOM API
- 因此非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的
- 同时 JSCore 的环境同 NodeJS 环境也是不完全相同的，所以一些 NPM 的包在小程序中也是无法运行的
- 小程序的性能介于 纯网页开发 与 原生(native)开发之间
1.2 微信开发者工具
微信开发者工具下载: 链接 (建议下载稳定版)
注册小程序: 链接 (开发时需要用到AppID)
1.3 VSCode的安装
由于微信开发者工具在写代码时,有些很常用的提示没有,不是很智能,所以可以选择VSCode来开发,并且可以下载微信开发相关的插件,非常方便;
VSCode下载链接: 链接
- VSCode常用开发插件安装:
- 微信小程序助手
- minapp
- open in browser : 用来在浏览器中打开html文件的插件
- 打开新标签页快捷键: control (command) + t
- 刷新当前页面: control (command) + r
- 关闭自动翻译弹窗: 设置 -> 高级 -> 语言 -> 展开 -> 询问是否翻译非您所用语言的网页
2. 创建小程序及仿写豆瓣登录页面
打开微信开发者工具,新建一个小程序项目,AppID使用注册小程序获得的AppID:
创建项目以后,会发现小程序的模块大体上可以分为4部分,如下图:
- assert : 集,可以用来放图片,文件之类
- pages: 每个不同的页面,每一个单独的页面包含4个文件,以登录页面login为例:
- login.js : 交互响应
- login.json : 页面配置
- login.wxml : 页面样式
- login.wxse : 页面结构
- utils: 工具类
- app类: 包括app开头的类文件,主要是用于描述整个小程序
注意: 在右侧箭头中,存放的是你创建的pages位置,当你创建一个pages时会自动将路径保存到此处,所以有时候创建了pages后又删除了,这里的路径不删除编译会报错(亲身经历)
2.1 关于Flex布局
在小程序开发中建议使用Flex布局,在其它开发语言,如JS,Dart等也是用了Flex布局,此处引用的小码哥细致的总结和其课件:
官方文档1
官方文档2
- 开启了flex布局的元素叫做flex container,里面的直接元素叫做flex items;
- 设置display属性为flex或者inline-flex,则可以成为flex container;
- flex container 以block-level的形式存在(块级元素:独占一行,宽度会占满整一行,后面不能在添加其他元素)
- inline-flex: flex container 以 inline-level 形式存在(行内元素:开启flex布局以后其他的元素可以和当前元素在同一行)
常用的CSS属性:
主轴:属性flex-direction:
主轴:属性justfy-content:
交叉轴:属性align-items:
交叉轴:属性align-content:
属性:align-content值对应的内容:
小程序发开建议使用尺寸单位rpx:
2.2 豆瓣登录界面搭建
豆瓣评分登录页面主要有logo,两个登录按钮,以及底部的协议信息组成,相对而言,是最简单搭建的一个页面;
首先创建一个文件夹login,然后右击文件夹,创建page;
注意: page的名字和文件夹的名称最好一致;
创建完成以后,会出现login开头的4个文件;
2.2.1 配置导航栏标题
全局的标题在app.json文件中配置navigationBarTitleText:
{
"pages": [
"pages/login/login",
"pages/agreement/agreement"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "豆瓣评分",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
login.json中配置当前登录页面的导航栏标题:
{
"navigationBarTitleText": "登录"
}
2.2.2 login.wxml文件
添加logo以及按钮:简单的点击建议直接使用最简单的控件view,绑定手势即可;
最外层使用一个view作为容器,方便后面的布局
- view.container class
- view#container id
- js里面字符串使用单引号,css里面使用双引号
- 函数名: function{}
- rpx紧跟数字,不留空格
<view class="container">
<image class="logo" src="/assets/imgs/ic_launcher.png" />
<view class="wechat btn-login" bind:tap="wechatLogin">微信登录</view>
<view class="douban btn-login" bind:tap="doubanLogin">已有豆瓣账号登录</view>
<view class="agreement">
登录表示同意
<view class="open" bind:tap="openAgreement">豆瓣使用协议/隐私协议</view>
</view>
</view>
2.2.3 login.wxss文件
控件的布局
.container {
display: flex; //外层container使用flex布局
flex-direction: column; //主轴方向为上下
align-items: center; //交叉轴对齐方式为center
padding: 0 40rpx;
}
.logo{
width: 144rpx;
height: 144rpx;
margin: 40rpx 0; //上下边距 40rpx 左右边距为0
}
.btn-login { //微信登录按钮和豆瓣按钮共有方法
height: 80rpx; //高度
line-height: 80rpx; //文本高度
width: 100%; //宽度占比100%
text-align: center; //文本居中对齐
border-radius: 10rpx; //圆角10rpx
}
.wechat {
background-color: #42BD55;
color: #fff;
margin-bottom: 30rpx; //底部间距
}
.douban {
background-color: #fff;
color: #42BD55;
border: 2rpx solid #42BD55; //边框
}
.agreement{
color: #9D9D9D;
font-size: 24rpx;
display: flex; //使用flex布局
position: absolute; //相对布局
bottom: 50rpx; //相对底部50rpx (相对于当前页面)
}
.agreement .open{
color: #4BB65C;
margin-left: 15rpx; //左边距15rpx
}
2.2.4 login.json文件
Page({
//微信登录按钮点击方法
wechatLogin:function(){
console.log('wechatLogin');
},
//豆瓣登录按钮点击方法
doubanLogin(){
console.log('doubanLogin');
},
//点击协议方法
openAgreement:function(){
console.log('openAgreement');
//使用navigateTo跳转到协议界面
wx.navigateTo({
//url 先往上层找到pages,然后再往下找agreement文件夹,然后找到agreement对应文件
url: '/pages/agreement/agreement',
success: (result) => {},
fail: () => {},
complete: () => {}
});
}
})
小程序包大小有限制,所以页面实现也比较简单,图片等资源最好放在服务器.