2. 程式人生 > >微信小程式入門（1）：簡單介面的實現

微信小程式入門（1）：簡單介面的實現

阿新 • • 發佈：2018-12-23

原始碼我已經放在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

    附上一截圖
    具體資料來自於幣乎

相關推薦

微信小程式入門（1）：簡單介面的實現

原始碼我已經放在GitHub上了https://github.com/A666AHL/pupil 1.安裝 微信web開發者工具 不多BB，直接從安裝IDE開始 首先，你得進入微信公眾平臺官網(https://mp.weixin.qq.com) 點選底部的小程式並檢視詳情

微信小程式入門（3）：移動端訪問PC

上一篇講了web-view的使用，然而你會發現這隻能訪問一些百度、淘寶、騰訊等一些存在的網站，但如何訪問自己本地ip以來訪問自己寫的一些網站呢？ 注意：這篇文章是利用Python開發的web，可能對一些其他僅有HTML、css、js的靜態不太適用 對於Django部分本篇不做過多講解，以後

我的微信小程序入門（1）

app 用戶 註冊 教程 微信公眾平臺 聯網 互聯 一個 .com 作為互聯網行業的一員，我們需要一個可以快速接受新鮮事物的腦袋。很高興的是，我有一半這樣的腦袋。 今年的互聯網行業，出現了一個生猛的新軍，那便是“微信小程序”了。 微信是近幾年最熱門的軟件應用（農藥也是）。而

微信小程式learning - （1）簡易教程

官方連結：https://developers.weixin.qq.com/miniprogram/dev/ 學習微信小程式，重點標記，只做記錄，自行看官方文件       全域性配置 小程式根目錄下的 app.json 檔案用來對微信

微信小程式入門（2）:web-view的使用

上一篇：簡單介面的實現 web-view是最近微信推出的元件，最開始用的時候對於我來說，就是一個內嵌網頁，相當於HTML裡的a標籤。然而這個元件卻不像想象中的那麼好用，不過困擾我十多天後，終於找到一個小方法來“解決”了，看完勿噴。 首先，你得是用企業賬戶或其它賬戶申請註冊的

微信小程式學習（1）——小程式專案檔案及資料夾的功能介紹

因為工作的需要所以開始接觸微信小程式了，特此來記錄自己的學習過程和遇到的一些問題。 在新建一個微信小程式專案時主要會有如下幾個資料夾和檔案，主要就是介紹一下他們的主要功能。 檔案： app.js：主要就是註冊微信小程式應用 app.json：一些微信小程式的全

微信小程式入門（登入頁面）

1.首先前往開發者工具下載安裝開發工具：2.安裝後微信掃碼，並填寫自己的AppID選擇自己的專案目錄後登入：登陸後點擊工具上的編譯按鈕，可以在工具的左側模擬器介面看到這個小程式的表現，也可以點選預覽按鈕，通過微信的掃一掃在手機上體驗你的第一個小程式。3.程式碼構成：可以看到在

微信小程式-01（筆記）

微信小程式和Vue有點相似。 首先下載開發工具，直接去官網找工具就可以了  然後安裝使用就可以了 點選選擇小程式，來到這裡 點選測試號小程式 ，會自動生成AppID。然後建立專案就可以了 介面就是這樣、可以選擇各種機型以及屬於你的糞×。點選編譯或者直接

微信小程式支付（thinkphp）

之前一直想學下微信支付，這次終於有機會來操作一下，還是記錄下來，跟大家分享分享。 一、首先，我們要在微信官方網站上去下載支付介面，然後改個名方便呼叫（例如：WeiXinpay），然後將下載的檔案放入thinkphp的Vendor檔案下面； 二、然後去官網下載商戶操作證書:https://pa

微信小程式——操作（一）

首先，你需要從官網上https://mp.weixin.qq.com/cgi-bin/wx下載“微信web開發者工具”，如下圖 雙擊開啟 設定專案路徑，AppId或者點選小程式，入門就建立快速啟動模版，確定開啟。 開啟程式後，我們先認識一下目錄：如圖所示， pages資料夾放的是你每

微信小程式 筆記（一）

navigateTo, redirectTo 只能開啟非 tabBar 頁面。 switchTab 只能開啟 tabBar 頁面。 reLaunch 可以開啟任意頁面。 頁面底部的 tabBar 由頁面決定，即只要是定義為 tabB

微信小程式學習（18） —— 上拉載入和下拉重新整理

在微信小程式上實現下拉重新整理、上拉載入的效果 使用系統提供的onPullDownRefresh、onReachBottom這2個事件， 前提需要在app.json或page.json配置檔案中設定，才能使用。 app.json是全應用的頁面都可以使用該事件

微信小程式新聞（文章）釋出系統前後臺完整程式碼

1：建表 。分類表，新聞表 2：後臺。新增新聞，管理新聞。 3：小程式介面。列表頁，詳情頁。 4：後臺介面 5：小程式程式碼 //////////////////////////////////////////////

微信小遊戲開發（1）

一、安裝開發工具 前往開發者工具下載頁面，網址：https://developers.weixin.qq.com/minigame/dev/devtools/download.html，根據自己的作業系統下載對應的安裝包進行安裝。 二、建立小遊戲專案 1、開啟微信開發者工具，選擇小程式

從零開始學微信小程式開發（一）

從我學習開發小程式到現在，已經有好幾款上線了。雖然都是一些益智類的小程式，不難，但是也從裡面學到了一些知識。 1.準備工作 首先需要去官網註冊一個小程式的帳號。註冊好賬號以後，就可以設定補充小程式的資訊

微信小程式 - debug（除錯）

微信小程式除錯的方式是基於Chrome.     1. 常見console.log除錯（可以具體參考console.log這個函式使用，它可不止這一個作用！）         2.使用NETWORK（我們可以查詢到訪問了那些介面以

微信小程式實戰（一）---實現登入介面

昨天小程式第一天公測，就下載個小程式自帶IDE玩了玩，看了看API，擼出了個登入介面給大家分享下。 下面是主介面和程式碼。 index.wxml <view class="container"> <view class="usermotto">

微信小程式把玩（九）scroll-view元件

scroll-view為滾動檢視，分為水平滾動和垂直滾動。注意滾動檢視垂直滾動時一定要設定高度否則的話scroll-view不會生效。滾動檢視常用的地方一般都是Item項比較多的介面，比如我的模組

微信小程式筆記（一）

微信小程式的初步使用   昨個寫了個Vue的小練習，今天再來個微信小程式的練習。資料繫結上大致跟vue的用法差不多，可惜了不會CSS，要不寫起來能順溜不少。這麼一看還是寫Android順手。 1、建立

微信小程式開發（三）- 顯示 loading 提示框

首先看一張圖片，就是要做成的效果。 當我們點選查詢時，就會有一個請選擇地點的彈出框。 這個狀態我們只能去看微信開發文件了。 這個在API-介面-互動反饋-wx.hideLoading() 這