微信小程序入门（1）：简单界面的实现

源码我已经放在GitHub上了https://github.com/A666AHL/pupil

1.安装微信web开发者工具

不多BB，直接从安装IDE开始

首先，你得进入微信公众平台官网(https://mp.weixin.qq.com)

点击底部的小程序并查看详情

然后选择开发者工具

在这里插入图片描述

根据你的操作系统选择不同的版本进行下载安装

2. 获取AppID

你注册好微信小程序后选择登录，之后进入到这个界面

在这里插入图片描述

然后选择在这里插入图片描述

在这里插入图片描述

这个东东还是比较重要滴

3.编写简单界面

在这里插入图片描述

注意我这quickstart（建立XXX快速启动模板）是一个都勾选的。个人觉得这样比较好，因为对于我这个小白来说，它为我建立的一些文件是看不动滴（无奈），一个一个琢磨太纠结了。所以我索性没选，这个看你本人的需求了

在这里插入图片描述

这就是全部文件了，首先呢？project.config.json这个文件是它本身就带的一个配置文件，就是一些关于你这个项目的一些信息，例如建立这个文件所用的AppID，这个项目的名字之类的东东，所以在我的GitHub上就没有上传这个文件。

好了，开始撸代码了

app.js

App({
  onLaunch: function () {
    //小程序初始化完成只执行一次
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)//setStorageSync个人理解是将开始本地数据logs换成了logs
  },
  onShow: function () {
    //启动小程序或者从后台进入前台
  },
  onHide: function () {
    //从前台进入后台
  },
  getUserInfo: function (cb) {
    var that = this
    if (this.globalData.userInfo) {
      typeof cb == "function" && cb(this.globalData.userInfo)
    } else {
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo,
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData: {
    //全局信息
    userInfo: null
  }
})

这些其实呢？说重要也还行吧！这些一般IDE都帮你码好了，不过我还是动手敲了一遍，大概意思明白，留下印象对自己还是有好处滴。这部分代码就不细讲了，怕带偏你们，全靠自己细细琢磨了。

App（）函数用来注册一个小程序。接受一个Object参数，其指定小程序的生命周期回调等。

App（）必须在app.js中调用，必须调用且只能调用一次。不然会出现无法预期的后果

这两句原话还是比较有用的

app.json

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#6699ff",
    "navigationBarTitleText": "explore币乎",
    "backgroundTextStyle":"light"
  },
  "networkTimeout": {
    "request": 30000
  }
}

这个配置文件是不允许写注释的，写的话好像有点麻烦，这就不演示了。首先需要在pages写上你要写的界面的路径，这里面的内容可以等你建完pages相关界面来写了，windows写的一些关于手机导航的样式，追究细节的话可以去看官方文档。最后的networkTimeout,从英文字面可以看出关于网络请求时间超时的东东，没错，就那意思。

app.wxss

这里可以写就是有关整个小程序的页面的样式，当然可以具体到每个页面的wxss文件里去写，而且具体页面的wxss文件级别要高于app.wxss文件了，就类似于app.wxss是父级，而具体到每个页面的wxss文件相当于是子级，而我这个app.wxss文件啥也没有

<view class="weui-search-bar">
  <view class="weui-search-bar_form">
    <view class="weui-search-bar_box">
      <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
      <input type="text" class="weui-search-bar_input" placeholder="{{searchtextbegin}}" bindinput="inputSearch" value='{{searchtext}}'/>
      <!--试着把clear图标变成按钮实现清除效果-->
      <button class="search-btn" wx:if="{{showsearch}}" bindtap="clearbtn">搜索</button>
      <icon class="weui-icon-clear_in-box" type="clear" size="14" wx:if="{{showsearch}}"></icon>
    </view>
  </view>
</view>
<view class="weui-slide-picture">
  <swiper class="index-banner" indicator-dots="{{true}}" autoplay="{{true}}" interval="{{4000}}" duration="{{1000}}" circular="true">
    <block wx:for="{{imgUrls}}" wx:key="*this">
      <swiper-item>
        <image class="slide-image" src="{{item}}" mode="widthFix"/>
      </swiper-item>
    </block>
  </swiper>
</view>
<view class="article-list">
  <navigator class="article-item">
    <view class="article-img">
      <image src="../../images/1.png" mode="aspectFill"></image>
    </view>
    <view class="article-text">
      <view class="article-title">
        <text>【2018年第37周EOS信息周报】\t一周重要信息均在于此\t|From:EOS Cannon|</text>
      </view>
      <view class="article-abstract">
        <text>1\tEOS账户创建成本现在已经降低25%。21个出块节点中有超过15个同意并实施了Block</text>
      </view>
    </view>
  </navigator>
   <navigator class="article-item">
    <view class="article-img">
      <image src="../../images/2.png" mode="aspectFill"></image>
    </view>
     <view class="article-text">
      <view class="article-title">
        <text>币走远：9.17行情展望|From:币走远|</text>
      </view>
      <view class="article-abstract">
        <text>首先提醒大家不要去玩期货，炒币加杠杆只是放大了出错的几率，珍爱钱钱原离尴尬。据cryptoglobe消息，近日Trybe</text>
      </view>
    </view>
  </navigator>
   <navigator class="article-item">
    <view class="article-img">
      <image src="../../images/3.png" mode="aspectFill"></image>
    </view>
     <view class="article-text">
      <view class="article-title">
        <text>币圈信息观察员用数据说话20180917|From:币圈观察|</text>
      </view>
      <view class="article-abstract">
        <text>市值前20种数据变化详情(数据取自非小号早上10点)：上面数据红(^V^)涨，绿(T-T)跌...</text>
      </view>
    </view>
  </navigator>
   <navigator class="article-item">
    <view class="article-img">
      <image src="../../images/4.png" mode="aspectFill"></image>
    </view>
     <view class="article-text">
      <view class="article-title">
        <text>津巴布韦新任财政部长：加密货币可以解决津巴布韦的现金短缺问题|From:币圈消息小达人|</text>
      </view>
      <view class="article-abstract">
        <text>据CCN消息， 根据津巴布韦新任财政部长Mthuli Ncube的说法，加密货币可以帮助南部非洲国家解决</text>
      </view>
    </view>
  </navigator>
   <navigator class="article-item">
    <view class="article-img">
      <image src="../../images/5.png" mode="aspectFill"></image>
    </view>
    <view class="article-text">
      <view class="article-title">
        <text>互联网思维与区块链思维|From:哪吒|</text>
      </view>
      <view class="article-abstract">
        <text>上周，听一位资深的互联网圈内人士在讲近些年互联网大企业的发展和变迁。他特意跟我们强调了一个概念，互联网不是一个行业，不是</text>
      </view>
    </view>
  </navigator>
   <navigator class="article-item">
    <view class="article-img">
      <image src="../../images/6.png" mode="aspectFill"></image>
    </view>
    <view class="article-text">
      <view class="article-title">
        <text>区块链是否代表互联网的未来？|From:鱼顽主|</text>
      </view>
      <view class="article-abstract">
        <text>过去这几年，随着互联网的成长，它变成了某些社会问题的替罪羊。今天的网络确实有很多问题，有虚假信息...</text>
      </view>
    </view>
  </navigator>
</view>

这些跟HTML应该差不多了，唯一新的wx:if和wx:for,其实理解成if和for的意思也差不多了，如果说有些代码有问题可以直接百度，这些代码应该比较常见啦~

index.wxss

.weui-search-bar{
  position:relative;
  padding:8px 10px;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  box-sizing:border-box;
  background-color:#efeff4;
  border-top:1rpx solid #d7d6dc;
  border-bottom:1rpx soid #d7d6dc;
}
.weui-icon-search_in-box{
  position: absolute;
  left:10px;
  top:7px;
}
.weui-icon-clear_in-box{
  position: absolute;
  right: 2px;
  top:7px;
}
.weui-search-bar_form{
  position:relative;
  -webkit-box-flex:1;
  -webkit-flex:auto;
  flex:auto;
  border-radius:5px;
  background: #fff;
  border:1rpx solid #e6e6ea;
}
.weui-search-bar_box{
  position: relative;
  padding-left:30px;
  padding-right:30px;
  width:100%;
  box-sizing: border-box;
  z-index:1;
}
.weui-search-bar_input{
  height: 28px;
  line-height: 28px;
  font-size: 14px;
}
.search-btn::after{
  border: none;
  background-color:#fff; 
}
.search-btn{
  position: absolute;
  right:6px;
  top:2px;
  height: 24px;
  width: 58px;
  line-height: 24px;
  font-size: 14px;
  color:#777; 
}
.slide-image{
  width: 100%;
}
.article-item{
  display: flex;
  padding: 20rpx 0;
  border-bottom: 2rpx solid #e8e8e8;
}
.article-img{
  margin-left: 5px;
  width: 235rpx;
  height: 150rpx;
}
.article-img image{
  width:235rpx;
  height:150rpx;
}
.article-text{
  flex: 1;
  margin-left:20rpx;
  width:100%;
}
.article-title{
  font-size: 30rpx;
   margin-right:12rpx; 
  font-family: "Times New Roman";
}
.article-abstract{
  margin-top:20rpx; 
  margin-right:16rpx; 
  font-size:20rpx; 
  color: #777;
  font-family: "Times New Roman";
}

这些类似于css文件的格式

index.json

这个文件我就加了俩花括号

index.js

Page({
  data:{
    searchtextbegin:"区块链是否代表互联网的未来？",
    searchtext:'',
    imgUrls:[
      "../../images/1.png",
      "../../images/2.png",
      "../../images/3.png",
      "../../images/4.png",
      "../../images/5.png",
      "../../images/6.png"
    ],
    showsearch: false
  },
  inputSearch: function (e) {  //输入搜索文字,e为输入的详细数据
    this.setData({
      showsearch: e.detail.cursor > 0,
      searchtext: e.detail.value
    })
  },
  clearbtn:function(e){
    this.setData({
      showsearch: e.detail.cursor > 0,
      searchtext:''
    })
  }
})

我觉得关键是先设置showsearch不可见，通过inputSearch事件改动showsearch的值使btn可见

还有我代码有一个部分有点小坑~

以上是我现阶段学习全部的分享啦~

![Screenshot_2018-09-25-20-57-05-774_com.tencent.mm] $(F:\TIM数据\2564337870\FileRecv\MobileFile$

附上一截图
具体数据来自于币乎