03-小程序实战 (一)：豆瓣登录

一、开发前的准备

• 1.1、利用 VSCode 全称是Visual Studio Code，它继承了 emmet 插件的功能，直接输入 html:5 生成一些基本的代码

提示：不要下载成了 Visual Studio，它是用来开发 C++ 、C# 等等的

1.2、在VSCode里面安装插件

插件1：minapp：微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）

插件2：小程序开发助手

1.3、在 微信开发者工具 里面 ：分离置顶模拟器

1.4、取色 ColorSlurp 推荐使用，在 App Store 可以搜到的，免费

1.5、本篇文章要做的效果图如下

二、开发小程序的一些准备

• 2.1、创建小程序项目
  

2.2、利用 VSCode 开发小程序，打刚才创建的项目，在VSCode里面写的代码，在保存后，在微信开发者工具会自动监听是否项目内容发生变化，从而重新运行模拟器

2.3、创建开发页面，按照标准都要在pages文件夹下面创建，如下登录页面 login

• js：是用来实现一些跳转、点击事件等等交互的东西
• json：是用来做配置的
• wxml：是用来写内容的地方
• wxss：是用来写内容怎么排布的地方

• 2.4、由于目前的界面只有一个，我们先把pages下面的 index和logs 删除掉，然后在 app.json 里面设置路径只保留："pages/login/login"
  

2.5、删除 app.wxss 整个小程序的样式，因为每个页面不一样

2.6、创建资源的文件夹 assets

三、开发小程序的我的页面

提示：在小程序里面不要使用div等标签是不支持的,支持下图的组件

• 3.1、创建一个容器view和 图片logo

<view class="container">
      <image class="logo" src="../../assets/imgs/ic_launcher.png" />
</view>

提示：如果给 view 添加背景图片：background-image: url();，无法使用本地图片，替代方案有三种

• 第1种：用image组件取代背景图片，上面的代码就是才用的 image 组件
• 第2种：用远程 url
• 第3种：将本地图片转换成 Base64 编码,不推荐使用，会使项目的体积变大

• 3.2、增加按钮：微信登录 和 已有豆瓣帐号 ，并给其增加点击事件

<view class="wechat btnlogin" bind:tap="wechatLogin">微信登录</view>
<view class="douban btnlogin" bind:tap="doubanLogin">已有豆瓣帐号</view>

提示：bind:tap 等同于 bindtap

• 在 js 里面实现点击事件

Page({
    wechatLogin:function(){
        console.log('微信登录');
    },
     doubanLogin:function(){
        console.log('已有豆瓣账号');
     }
})

• 之前的 js 代码是ES5,现在写的都是 ES6,像ES2017、ES2018我们都统称为ES6系列

• 3.3、豆瓣使用协议和隐私的跳转
  wxml 的代码如下

<view class="agreement">
登录表示同意
    <view class="open" bind:tap="openagreement">豆瓣使用协议/隐私协议</view>
</view>

• js 里面的代码如下

openagreement:function(){
  console.log('打开豆瓣协议');
  wx.navigateTo({
      // 跳转的路径
      url: '/pages/agreement/agreement',
      // 跳转成功所走的方法，其中 => 是ES6新的表示方式
      success: (result) => {
      },
      // 跳转失败的方法
      fail: () => {},
      // 跳转完后所走的方法，不管成功还是失败
      complete: () => {}
  });
}

• 定义一个跳转的协议界面 agreement,一般展示协议，我们用组件<web-view src="链接" bindmessage=""></web-view>即可，但是：webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。

最后：小程序的代码