當前位置：首頁 > 运维知识 > 数据库 >内容正文

数据库

小程序开发初体验，从静态demo到接入Bmob数据库完全实现

發布時間：2024/7/5 数据库 59 豆豆

生活随笔收集整理的這篇文章主要介紹了小程序开发初体验，从静态demo到接入Bmob数据库完全实现小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

-----------------

這里整理的內容大致劃分四個部分

①常規選型

②靜態頁面

③接入Bmob數據庫

④發布小程序

⑤個人開發過程的筆記。

------------------

小程序-萌小福團建（密鑰：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

聲明：

接入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.jspackageEnter: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

轉載于:https://www.cnblogs.com/GuliGugaLiz/p/10153817.html

總結

以上是生活随笔為你收集整理的小程序开发初体验，从静态demo到接入Bmob数据库完全实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： vue-todolist
下一篇： CentOS7完成mysql的安装和远程