小程序項目入門以及一些填坑日常

在開啟你的第一個小程序項目之前，你需要做一些準備工作，這是小程序的簡易教程文檔地址：https://developers.weixin.qq.com/miniprogram/dev/。你需要申請一個小程序賬號，獲取你的AppID，同時，下載小程序開發(fā)者工具，選擇創(chuàng)建 QuickStart 項目就可以開啟你的第一個小程序項目啦。具體過程，請移步上面的文檔地址。

一、簡單介紹一下目錄結構

當你快速創(chuàng)建了一個小程序的項目后，根目錄有幾個應用入口文件你是需要了解它們分別是做什么的。如：app.js、app.json、app.wxss、project.config.json
（一）app.js：設置一些項目的全局變量以及處理登錄或者獲取用戶信息等。
（二）app.json：用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。
（三）app.wxss：用來設置項目的一些全局樣式。
（四）project.config.json：項目配置文件。
（五）項目中一個頁面包含四個文件：index.wxml：頁面結構；index.wxss：頁面樣式；index.json：頁面配置文件；index.js頁面邏輯層

二、制作一個簡單的小項目

（一）創(chuàng)建目錄結構
主頁包括“首頁”和”我的”兩個模塊，另外包括一個登錄頁。創(chuàng)建目錄結構以及相關文件。如下圖：


menu.png

（二）配置相關文件，準備相關圖片或其他資源

{
  "pages":[
    "pages/main/main",
    "pages/login/login",
    "pages/index/index",
    "pages/logs/logs",
    "pages/userSetting/userSetting"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#666",
    "backgroundColor": "#f4f4f4",
    "list": [
      {
        "pagePath": "pages/main/main",
        "text": "首頁",
        "iconPath": "./images/tabbar/首頁.png",
        "selectedIconPath": "./images/tabbar/首頁.png"
      },
      {
        "pagePath": "pages/userSetting/userSetting",
        "text": "我的",
        "iconPath": "./images/tabbar/我的.png",
        "selectedIconPath": "./images/tabbar/我的.png"
      }
    ]
  }
}

在app.json文件的pages中添加main項，main放在第一條，即頁面進入后首頁即為首頁。
PS：這里有個坑，pages數據索引為1的頁面必須出現在tabBar的list中維護的選項，不然tabBar顯示不出來。
將相關圖片復制到images文件夾下：


images.png

（三）創(chuàng)建首頁相關內容

main.xwml：
<!--main.wxml-->
<view class="main-container">
  <view class="swiper-title">
    <text>穿越時空的思念</text>
  </view>
  <swiper class="swiper-container" autoplay='true' interval='3000'>
    <swiper-item>
      <image class="swiper-image" mode="aspectFit" src='../../images/swiper/pic1.jpg' ></image>
    </swiper-item>
    <swiper-item>
      <image class="swiper-image" mode="aspectFit" src='../../images/swiper/pic2.jpg' ></image>
    </swiper-item>
    <swiper-item>
      <image class="swiper-image" mode="aspectFit" src='../../images/swiper/pic3.jpg' ></image>
    </swiper-item>
  </swiper>
  <view class="swiper-text">
    <text>簡介：邪惡的奈落與犬夜叉一行的戰(zhàn)爭愈演愈烈，為了保護心臟不受傷害，他在白靈山分離出一個能洞察人類心靈的嬰兒，并將心臟托其保管。在此之后，嬰兒被某高僧砍作兩半，變成白童子和赤子。當得知奈落心臟的重要性時，這兩個同樣邪惡的童子決定反客為主。赤子利用魍魎丸不斷加固體外的甲胄，白童子和神樂則在與犬夜叉戰(zhàn)斗的同時暗中與奈落展開對抗。犬夜叉、鋼牙、殺生丸為了除掉奈落也不斷提高各自的戰(zhàn)斗力，雙方的抗爭終于接近高潮，宿命中的正邪決戰(zhàn)在所難免……
    </text>
  </view>
</view>
main.wxss：
/**main.wxss**/
.swiper-container {
  width: 100%;
  height: 500rpx;
}

.swiper-title {
  margin-top:30rpx;
  text-align:center;
  color: #999;
}

.swiper-image {
  width: 100%;
  height: 500rpx;
}

.swiper-text {
  margin:0;
  padding:0 40rpx;
  color:#444;
  font-size: 0.8rem;
}
main.json：
{
  "navigationBarTitleText": "首頁"
}
main.js：
//main.js
//獲取應用實例
const app = getApp()

Page({
  data: {

  },

  //事件處理函數
  onLoad: function () {

  }
})

效果圖如下：


main.jpg

PS：以上圖片為輪播圖，具體可以download項目代碼去看。

（四）創(chuàng)建我的相關模塊文件

userSetting.xwml：
<!--userSetting.wxml-->
<view class="user-setting-container">
  <view class="user-setting">
    <image class="user-avatar" src="../../images/login-pic.jpg" mode="aspectFit"></image>
    <button class="user-login-status" bindtap="login">登錄/注冊</button>
  </view>
</view>
userSetting.wxss：
/**userSetting.wxss**/
.user-setting {
  display: flex;
  align-items: center;
}
.user-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 30rpx;
  border-radius: 50%;
}

.user-login-status {
  margin-left: 20rpx;

}
userSetting.json
{
"navigationBarTitleText": "我的"
}
userSetting.js：
//userSetting.js
//獲取應用實例
const app = getApp()

Page({
  data: {

  },

  //事件處理函數
  onLoad: function () {

  },
  login() {
    wx.navigateTo({
      url: "../../pages/login/login"
    })
  }
})

圖片如下：


userSetting.jpg

（五）添加我的模塊，點擊登錄/注冊跳轉到首頁tab選項功能：
相關頁面如下：

login.xwml：
<!--login.wxml-->
<!--login.wxml-->
<view class="container">
  <view class="login-info">
    <text class="user-nick-name">{{ nickName }}的App</text>
    <image class="user-avatar" src="../../images/login-pic.jpg" mode="aspectFit"></image>
    <view class="user-info">
      <view class="section">
        <form action="">
          <input class="user-phone-number"
                 type="number"
                 name="phoneNumber"
                 placeholder="請輸入您的手機號碼"
                 bindinput="phoneNumberInput"
                 placeholder-style="color: #999;"
                 focus/>
        </form>
      </view>
      <button class="login-btn" type="default" bindtap="turnToMain">登錄</button>
    </view>
  </view>
</view>

PS：input標簽為原生組件標簽，在模擬器中需長按鼠標才可以輸入內容。

login.wxss：
/**login.wxss**/
/**login.wxss**/
.login-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 30rpx;
  border-radius: 50%;
}

.user-nick-name {
  color: #999;
}

.user-phone-number {
  padding: 20rpx;
  margin: 30rpx 0;
  border: 1rpx solid #f8f8f8;
}

.login-btn {
  color: #999;
}
login.json：
{
  "navigationBarTitleText": "登錄"
}
login.js：
//login.js
//獲取應用實例
const app = getApp()

Page({
  data: {
    nickName: '犬夜叉',
    phoneNumber: ''
  },

  //事件處理函數
  onLoad: function () {

  },
  phoneNumberInput: function(e) {
    this.setData({
      phoneNumber: e.detail.value
    });
  },
  turnToMain() {
    wx.switchTab({
      url: '../../pages/main/main'
    })
  }
})

頁面：


login.jpg

PS：設置字體時可直接用小程序的rpx單位。

?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,229評論 25贊 708
  • 文/娜娜 攝/娜娜 難以忘記你，難以忘記這城中的點點滴滴。 時隔半年重游此地，早已花非花，地歸地，不可同日而語...
    何娜娜GL閱讀 153評論 0贊 0
  • 煙雨蒙蒙泛舟行，花柳依水燕語輕。 一路樓臺終幻影，明堂不復與山平。
    妮可米唯閱讀 5,885評論 6贊 4
  • 前兩天有個朋友開了一家餐飲，朋友請我們去給他捧場，吃完感覺口味和價格都還不錯，但是朋友卻告訴我：生意一般般，顧客反...
    北瓜西葫蘆閱讀 313評論 0贊 0

友情鏈接更多精彩內容