微信小程序開發流程介紹

責任編輯:福建福彩快3开奖结果 //www.yhrpv.com/



借助福建福彩快3开奖结果紅利期,小程序的開發可以是離線的實際流程,但對于一些線下傳統商家來說,沒有開發的基礎一個小程序。以下是福建福彩快3开奖结果過程的介紹,適合零基礎小程序開發者。

微信小程序 開發流程介紹

 

新建小程序項目

一、首先,新項目選擇小程序項目,選擇存儲代碼的硬盤路徑,填寫applet AppID,給你的項目一個好名字,最后點擊確定,你將得到你的applet開發人員。 

目錄結構

page
   index
   index.js
   index.wxml
   index.wxss

logs
   logs.js
   logs.json
   logs.wxml
   logs.wxss

utils
   util.js

app.js
   app.json
   app.wxss
   project.config.json

下載和安裝BmobSDK

一、把bmob-min.js和underscore.js放到相應的文件,例如放到utils中

二、接著是在app.js中加入下面兩行代碼進行全局初始化

const Bmob = require(\'utils/bmob.js\');

Bmob.initialize(你的Application ID, 你的REST API Key);

一、創建一個名字為detail的表,然后點擊添加列創建3個字段,一個一個的添加

title字段,String 類型,用于存放文章的標題 image字段,String 類型,用于存放文章的圖片 detail字段 String類型,用于存放文章的正文 然后添加一些數據進行測試

 

列表頁面實現

一、去到index.js中 Ctrl + A然后按Delete清空這個頁面,然后自己來寫邏輯吧,首先我們需要引入bmob.js 然后在onLoad小程序生命周期中去請求detail表中的數據,讓bmob和小程序完成第一次交互

//index.js
//獲取應用實例
const Bmob = require(\'../../utils/bmob.js\'); //每個需要使用到bmob的頁面都需要引入這個js

Page({
  onLoad() { 
    let Diary = Bmob.Object.extend(detail); //引入detail這張表
    let query = new Bmob.Query(Diary);
    query.find({
      success: (results) => {
        console.log(results)//打印數據
      },
      error(error) {
        console.log(`查詢失敗: ${error.code } ${error.message}`);
      }
    });
  },
})

這里完成了一次對bmob的數據查詢,bmob文檔傳送門, 這個查詢默認返回10條記錄。當數據多了之后,一次查詢很多數據,這樣是不友好的,并不是說bmob查詢數據慢,而是指如果將來你的用戶在網速比較慢的情況使用你的小程序,請求數據等待時間過長,這個等待的過程也許會導致用戶不再使用你的小程序。所以我們需要優化用戶體驗。那么將代碼改造成一上拉加載更多。

//index.js
//獲取應用實例
const app = getApp();
const Bmob = require(\'../../utils/bmob.js\'); //每個需要使用到bmob的頁面都需要引入這個js

Page({
  data: {
    detail:[], //頁面數據
    pagination:0, //頁碼
    pageSize: 4, //每頁數據
    nodata:true //無數據
  },
  onLoad() { 
    //初始頁面第一次獲取頁面數據
    this.getData(); 
  },
  getData(){
    let Diary = Bmob.Object.extend(detail); //引入detail這張表
    let query = new Bmob.Query(Diary);
    query.limit(this.data.pageSize); //返回n條數據
    query.skip(this.data.pageSize * this.data.pagination); //分頁查詢
    query.descending(\'createdAt\'); //已created列倒序
    query.find({
      success: (results) => {
        let data = [];
        //將得到的數據存入數組
        for (let object of results) {
          data.push({
            id: object.id,
            title: object.get(\'title\'),
            image: object.get(\'image\'),
            detail: object.get(\'detail\'),
            createdAt: app.timeago(object.createdAt) //調用timeagoJs把日期轉成N天前格式
          })
        }
        //判斷是否有數據返回
        if(data.length){
          let detail = this.data.detail; //得到頁面上已經存在的數據(數組)
          let pagination = this.data.pagination; //獲取當前分頁(第幾頁)
          detail.push.apply(detail, data); //將頁面上面的數組和最新獲取到的數組進行合并
          pagination = pagination ? pagination+1 : 1; //此處用于判斷是首次渲染數據還是下拉加載渲染數據

          //更新數據
          this.setData({
            detail: detail,
            pagination: pagination
          })
        }else{
          //沒有返回數據,頁面不再加載數據
          this.setData({
            nodata: false
          })
        }
      },
      error(error) {
        console.log(`查詢失敗: ${error.code } ${error.message}`);
      }
    });
  },
  router(e) {
    //跳轉至文章詳情頁
    const id = e.currentTarget.dataset.id
    wx.navigateTo({
      url: `../detail/detail?id=${id}`
    })
  },
  onReachBottom(){
    //下拉觸底加載更多數據
    this.getData();
  }
})

上述代碼中在日期處使用了timeagoJs下載地址,下載timeagoJs放到util文件夾中,然后在app.js中引入。

//app.js

const Bmob = require(\'./utils/bmob.js\')

const timeago = require(./utils/timeago.min.js);

Bmob.initialize(你的Application ID, 你的REST API Key);

App({
  timeago(date){
    return new timeago().format(date, \'zh_CN\')
  }
})

二、完成了列表頁邏輯層之后,去到index.wxml編寫視圖層,視圖層就簡單許多了,得到的數據是一個數組,數組里面是一個json,用wx:for方法把它渲染出來就好了

三、來對頁面進行一些美化,編寫一樣樣式吧。畢竟這是一個看臉的社會

 

/**index.wxss**/
.container{ padding: 30rpx;}
.pane{ width: 100%; margin-bottom:30rpx; border-radius: 5rpx; overflow: hidden; box-shadow: 0 0 10rpx rgba(0, 0, 0, .1) }
.pane image{ width: 100%; height: 240rpx; display: block;}
.pane .content{ background-color: #FFF; padding: 20rpx;}
.pane .title{ display: block; font-size: 30rpx; font-weight: bold; margin-bottom: 20rpx;}
.pane .date{ display: block; font-size: 24rpx; color: #999}
.nodata{ text-align: center; font-size: 24rpx; color: #999}

以上列表頁面算是完成了。此時點擊頁面的時候,應該會報錯,提示detail頁面未配置,那來到app.json里面配置一下detail這個頁面。

以上是微信小程序 開發流程介紹,更多關于微信小程序其他功能開發,可以關注本網站,謝謝。




澤群一站式網絡服務機構竭誠為您提供:

福建福彩快3开奖结果,福建福彩快3开奖结果,福建福彩快3开奖结果,福建福彩快3开奖结果,福建福彩快3开奖结果,福建福彩快3开奖结果,福建福彩快3开奖结果,福建福彩快3开奖结果,SEO優化,模板建站,云服務等服務

相關資訊