小程序開發入門教程

一、下載安裝小程序開發工具

　　登錄微信公眾平台：https://mp.weixin.qq.com/

　　進入小程序開發文檔

　　選擇工具選項

　　下載對應平台的開發工具，直接鏈接：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

　　安裝小程序開發工具

 

二、創建項目

 　　項目創建流程

 　　此時，開發工具將自動幫我們創建一個基礎項目，開發工具操作面板結構如下：

 

　　整個界面大致分為A、B、C、D、E四個功能區域

　　A：模擬器展示

　　B：項目文件資源管理

　　C：代碼編寫區域

　　D：代碼調試面板，與谷歌瀏覽器的開發者工具很相似。

　　E：項目配置

 

 三、項目結構

　　項目中共有四種文件類型，對應功能如下：

1. .json 后綴的 JSON 配置文件
2. .wxml 后綴的 WXML 模板文件
3. .wxss 后綴的 WXSS 樣式文件
4. .js 后綴的 JS 腳本邏輯文件

 　　項目根路徑下的app.js文件為項目啟動交互邏輯文件，app.json文件為項目的全局配置文件。

 

　　pages目錄下的每個子目錄對應界面中的一個頁面。

　　每個頁面目錄下的json文件是各個頁面的配置文件。

 

 　　數據傳遞到頁面，使用雙大括號{{}}

　　js文件的結構如下

Page({
  data: { // 參與頁面渲染的數據
    logs: []
  },
  onLoad: function () {
    // 頁面渲染后 執行
  }
})

 

 

四、代碼編寫

分享功能以及網絡請求

　　index.wxml

<!--index.wxml-->
<view class="container">
  <text class="userinfo-nickname">{{templateInfo.code}}</text>
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
  <view>
  <button id="shareCloseBtn" type='{{shareBtnInfo.type}}' bindtap="onShareCloseBtnClick">{{shareBtnInfo.text}}</button>
  <button id="shareBtn" style='margin-top: 50px;' type='primary' open-type='share'> 分享 </button>
  </view>
</view> 

 　　index.js

//index.js
//獲取應用實例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    shareBtnInfo:{
      text: '關閉分享',
      flag: true,
      type: 'warn'
    },
    templateInfo:{
      code:''
    },
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件處理函數
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回
      // 所以此處加入 callback 以防止這種情況
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在沒有 open-type=getUserInfo 版本的兼容處理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
    /**
     * 網絡請求
     */
    wx.request({
      url: 'http://60.255.160.15:8070/template/getDetailById', //僅為示例，並非真實的接口地址
      method:'GET',
      data: {
        id: '1'
      },
      success: res => {
        console.log(res.data)
        if(!res.data){
          this.setData({
            templateInfo: { code: '獲取到code發生錯誤' }
          })
        }
        const code = res.data.code ;
        if (code == 20000){
          const data = res.data.data ;
          if(data){
            this.setData({
              templateInfo: {code:data.code}
            })
          }
        }else{
          this.setData({
            templateInfo: { code: '未獲取到code' }
          })
        }
      }
    })
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
  /**
   * 關閉/打開分享按鈕點擊事件
   */
  onShareCloseBtnClick : function(){
    if (this.data.shareBtnInfo.flag){
      wx.hideShareMenu()
      this.setData({ shareBtnInfo:{
        text: '打開分享',
        flag : false,
        type:'primary'
      }})
    }else{
      wx.showShareMenu({
        withShareTicket: true
      })
      this.setData({
        shareBtnInfo: {
          text: '關閉分享',
          flag: true,
          type: 'warn'
        }
      })
    }
  },
  /**
   * 分享事件處理
   */
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 來自頁面內轉發按鈕
      console.log(res.target)
      
    }
    return {
      title: '自定義轉發標題',
      path: '/page/user?id=123',
      success: function (res) {
        // 轉發成功
      },
      fail: function (res) {
        // 轉發失敗
      }
    }
  }
})

 　　效果如下