小程序開發初體驗，從靜態demo到接入Bmob數據庫徹底實現

時間  2019-11-29
標籤 程序 開發 體驗 靜態 demo bmob 數據庫 徹底 實現 欄目 網站開發 简体版
原文   原文鏈接

以前我胖汾公司年會、問我能不能幫忙搞個小程序方便他們進行遊戲後的懲罰/抽獎使用、出了個簡單的設計圖、大概三天左右作了個簡單的小程序、目前提交審覈了。對於寫過一小段時間vue來講小程序很容易上手、寫法和結構差很少。php

-----------------css

這裏整理的內容大體劃分四個部分html

①常規選型vue

②靜態頁面git

③接入Bmob數據庫github

④發佈小程序數據庫

⑤我的開發過程的筆記。json

------------------小程序

小程序-萌小福團建（密鑰：20190101）後端

靜態完整代碼：https://github.com/GugaLiz/GamePunishment/tree/master

接入Bmob數據庫後的完整代碼：https://github.com/GugaLiz/GamePunishment/tree/br/2.x

 

===============================常規選型===============================

1.小程序開發官方文檔

①簡易教程（第一次開發小程序請務必看完簡易教程這一頁好嗎？答應我！主要是看看怎麼申請小程序和安裝上開發工具，有公衆號的注意，登陸頁面跟公衆號是同樣的，根據你的登陸帳戶區分登陸公衆號仍是小程序的！！！）：https://developers.weixin.qq.com/miniprogram/dev/

②組件：https://developers.weixin.qq.com/miniprogram/dev/component/

③API：https://developers.weixin.qq.com/miniprogram/dev/api/

2.WEUI（UI組件這裏選的WEUI）

①樣式瀏覽：https://weui.io/

②對應樣式的源碼：https://github.com/Tencent/weui-wxss

3.Iconfont（沒有正式美工，在這裏偷幾個圖標用下了）：https://www.iconfont.cn

4.Bmob數據庫

①如何在小程序中使用文檔：http://doc.bmob.cn/data/wechat_app_new/index.html

②Bmob後端雲（登陸進去就能夠建項目的數據庫了）：https://www.bmob.cn/

③Bmob使用實例：https://www.jianshu.com/p/4894bd07fa31

 

===============================着手開發靜態頁面===============================

 

1.使用WEUI準備工做（參考資料，很是詳細：https://blog.csdn.net/chq1988/article/details/73549027）

①到官網https://github.com/Tencent/weui-wxss把weui項目clone到本地。

②解壓縮-進入weui-wxss-master\dist\style文件夾-找到weui-wxss-master\dist\style\weui.wxss文件

③把weui.wxss文件複製到你的小程序項目根目錄下面便可，開發工具上就能夠看到

④在項目中引用：在app.wxss中加入weui.wxss的引用  @import ‘weui.wxss’;

⑤在項目中使用便可（能夠打開https://weui.io/找到本身要的樣式，對應https://github.com/Tencent/weui-wxss這裏能夠找到參考代碼）

好比：我要使用button在https://weui.io/#button看我要哪一種，而後我去https://github.com/Tencent/weui-wxss/tree/master/src/example/button這裏就查看到代碼咯。ctrl +C  -- ctril+V曉得了吧。

2.使用iconfont準備工做（參考資料，推薦：https://blog.csdn.net/YZi_Angel/article/details/80582166）

①進入官網https://www.iconfont.cn

②iconfont使用手冊

搜圖標

-添加入庫

-點擊右上角的購物車-添加至項目

-點擊下載到本地

③將下載的download解壓縮-找到 iconfont.css 文件，將裏面的內容所有複製到小程序的app.wxss裏面

！注意：若是你又在iconfont裏面添加了新的圖標、是要更改這個文件的！！

首先是在你的項目裏面查看代碼，會提示你新增了圖標要刷新看代碼了

把這段代碼複製到app.wxss中，位置就是@font-face{..}這段，同時下面要添加你的圖標定義。

 ④使用iconfont

<text class='iconfont icon-hongbao'>抽獎</text>
效果如圖：

 

 

3.目錄結構。（images存放靜態圖片等，pages就是你的功能頁面【xx.js文件寫事件數據邏輯、xx.wxml寫頁面、xx.wxss寫樣式】）

4.寫代碼邏輯

個人靜態的代碼在這裏，能夠參考借鑑（順手求個start感謝）：https://github.com/GugaLiz/GamePunishment/tree/master

 

===============================接入Bmob數據庫實現動態數據===============================

 

1.註冊登陸Bmob後端雲-->建立數據庫（添加應用）-->添加表（都是傻瓜式添加操做，務必按下面參考資料走，很是詳細簡單）

參考資料走一波：http://docs.bmob.cn/data/wechatApp/a_faststart/doc/index.html#註冊Bmob賬號

 

2.查看官方操做文檔（http://doc.bmob.cn/data/wechat_app_new/index.html#_15）把要增刪查改到數據庫的數據打通

 個人使用案例：

①引入Bmob.js到小程序項目

②在要用Bmob的頁面聲明及使用

好比在個人redPackagesDetail.js

聲明：

var Bmob = require("../../utils/dist/Bmob-1.6.7.min.js");
var query = Bmob.Query("result");
查找數據：
query.equalTo("userName", "==", options.userName);
query.find().then(res => {
me.setData({
details: res
})
});
附上該js頁完整代碼 
// pages/redPackagesDetail/redPackagesDetail.js
var Bmob = require("../../utils/dist/Bmob-1.6.7.min.js");
var query = Bmob.Query("result");
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    details:[]

  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var me = this;
    if(options.userName){
      query.equalTo("userName", "==", options.userName);
      query.find().then(res => {
        //res.map((item) => (item.updatedAt = (item.updatedAt.split(' ')[1])));
        me.setData({
          details: res
        })
      });
    }
  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})
redPackagesDetail.js

 

接入Bmob之後的小程序徹底代碼在這裏（求個順手start）：https://github.com/GugaLiz/GamePunishment/tree/br/2.x

 

===============================發佈小程序===============================

1.提交代碼

小程序開發工具-右上角「上傳」

2.提交審覈

①設置你的小程序信息

小程序頁面-設置-基本設置

②提交審覈（要填你的功能頁面信息，儘可能把大頁面的填好填滿，否則會打回從新審覈）

小程序頁面-管理-版本管理-審覈版本

 

③若是有打回，按照他反饋信息進行修改，再提交審覈便可。

 

 

===============================過程當中遇到瑣碎筆記===============================

1.tabBar添加（我寫的這個後來修改了設計就沒有使用tarBar）

在app.json文件中添加代碼

"tabBar": {
"color": "#dddddd",
"selectedColor": "#13227a",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "images/index.png",
"selectedIconPath": "images/indexSel.png",
"text": "首頁"
},
{
"pagePath": "pages/setting/setting",
"iconPath": "images/setting.png",
"selectedIconPath": "images/settingSel.png",
"text": "設置"
}
]
} 
 1 {
 2   "pages": [
 3     "pages/index/index",
 4     "pages/logs/logs",
 5     "pages/setting",
 6     "pages/setting/setting"
 7   ],
 8   "window": {
 9     "backgroundTextStyle": "light",
10     "navigationBarBackgroundColor": "#fff",
11     "navigationBarTitleText": "WeChat",
12     "navigationBarTextStyle": "black"
13   },
14   "tabBar": {
15     "color": "#dddddd",
16     "selectedColor": "#13227a",
17     "borderStyle": "white",
18     "list": [
19       {
20         "pagePath": "pages/index/index",
21         "iconPath": "images/index.png",
22         "selectedIconPath": "images/indexSel.png",
23         "text": "首頁"
24       },
25       {
26         "pagePath": "pages/setting/setting",
27         "iconPath": "images/setting.png",
28         "selectedIconPath": "images/settingSel.png",
29         "text": "設置"
30       }
31     ]
32   }
33 }
app.json

 

2.頁面跳轉的方式：

方式一：wx.navigationTo({url:''});自帶後退功能的 
頁面 index.wxml


<button class="weui-btn" type="default" plain="true" bindtap="packageEnter">抽獎</button>



頁面 index.js


packageEnter:function(){
    wx.navigateTo({
      url: '../redPackage/redPackage'
    })
  },
View Code

方式二：在.wxml文件中直接寫跟html的<a></a>標籤相似

<navigator url='../redPackagesSetting/redPackagesSetting'>跳轉</navigator> 
<view class="setting">
    <navigator url='../redPackagesSetting/redPackagesSetting'>
      <text class='iconfont icon-shezhi' style="color:#FFB1B0;font-size:25px;" >
      </text>
    </navigator>     
  </view>
View Code

方式三：帶參數跳轉頁面 <navigator url="../redPackagesDetail/redPackagesDetail?userName={{item.userName}}">GugaLiz</navigator >

參考資料：https://www.cnblogs.com/azhqiang/p/9634334.html

wxml頁面

<view wx:for="{{counts}}" wx:key="index">
 <navigator url="../redPackagesDetail/redPackagesDetail?userName={{item.userName}}">
 <view class="weui-cells weui-cells_after-title">
 <view class="weui-cell weui-cell_access">
    <view class="weui-cell__bd">
       <view style="display: inline-block; vertical-align: middle;width:50%;">{{item.userName}}</view>
       <view class="weui-badge" style="margin-left: 5px;">共{{item._sumMoney}}元</view>
    </view>
     <view class="weui-cell__ft weui-cell__ft_in-access" style="font-size: 0" >
          <view style="display: inline-block;vertical-align:middle; font-size: 17px;" >詳細</view>
          <view class="weui-badge weui-badge_dot" style="margin-left: 5px;margin-right: 5px;" ></view>
      </view>
  </view>
  </view>
</navigator>
  </view>
redPackageCounts.wxml

js頁面

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    counts:[{userName:"GugaLiz",_sumMoney:2},{userName:"Echo",_sumMoney:12}]
  },


  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
   console.log(options.userName);   //輸出url帶過來的參數
  },

})
redPackageCounts.js

 

其它（參考官方文檔的API）：https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateBack.html

 

 3.使用彈框：

參考資料

（三種彈框寫法） http://www.php.cn/xiaochengxu-388964.html

（獲取input的值） https://www.cnblogs.com/dashucoding/p/10008119.html

（清空input） https://blog.csdn.net/huangmeimao/article/details/74936966

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程