微信小程序环境搭建,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文件的插件

google浏览器快捷键

• 打开新标签页快捷键: 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: () => {}
    });
  }
})

小程序包大小有限制,所以页面实现也比较简单,图片等资源最好放在服务器.