Skip to main content
 Web开发网 » 站长学院 » 浏览器插件

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

2021年10月10日6190百度已收录

这里整理的内容大致划分四个部分

①常规选型

②静态页面

③接入Bmob数据库

④发布小程序

⑤个人开发过程的笔记。

1.小程序开发官方文档

①简易教程/

②组件:/

③API:/

2.WEUI(UI组件这里选的WEUI)

①样式浏览:/

②对应样式的源码:

3.Iconfont:

4.Bmob数据库

①如何在小程序中使用文档:

②Bmob后端云(登录进去就可以建项目的数据库了):/

1.使用WEUI准备工作

①到官网到本地。

②解压缩-进入weui-wxss-master\dist\style文件夹-找到weui-wxss-master\dist\style\weui.wxss文件

③把weui.wxss文件复制到你的小程序项目根目录下面即可,开发工具上就可以看到

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

小程序开发初体验,从静态demo到接入Bmob数据库完全实现  小程序开发文档 第1张

⑤在项目中使用即可(可以打开这里可以找到参考代码)

小程序开发初体验,从静态demo到接入Bmob数据库完全实现  小程序开发文档 第2张

2.使用iconfont准备工作

①进入官网

②iconfont使用手册

搜图标

小程序开发初体验,从静态demo到接入Bmob数据库完全实现  小程序开发文档 第3张

添加入库

小程序开发初体验,从静态demo到接入Bmob数据库完全实现  小程序开发文档 第4张

点击右上角的购物车-添加至项目

小程序开发初体验,从静态demo到接入Bmob数据库完全实现  小程序开发文档 第5张

点击下载到本地

小程序开发初体验,从静态demo到接入Bmob数据库完全实现  小程序开发文档 第6张

③将下载的download解压缩-找到 iconfont.css 文件,将里面的内容全部复制到小程序的app.wxss里面

小程序开发初体验,从静态demo到接入Bmob数据库完全实现  小程序开发文档 第7张

注意:如果你又在iconfont里面添加了新的图标、是要更改这个文件的!!

首先是在你的项目里面查看代码,会提示你新增了图标要刷新看代码了

小程序开发初体验,从静态demo到接入Bmob数据库完全实现  小程序开发文档 第8张

把这段代码复制到app.wxss中,位置就是@font-face{..}这段,同时下面要添加你的图标定义。

小程序开发初体验,从静态demo到接入Bmob数据库完全实现  小程序开发文档 第9张

④使用iconfont

<text class='iconfont icon-hongbao'>抽奖</text>

效果如图:

小程序开发初体验,从静态demo到接入Bmob数据库完全实现  小程序开发文档 第10张

3.目录结构。(images存放静态图片等,pages就是你的功能页面【xx.js文件写事件数据逻辑、xx.wxml写页面、xx.wxss写样式】)

小程序开发初体验,从静态demo到接入Bmob数据库完全实现  小程序开发文档 第11张

4.写代码逻辑

我的静态的代码在这里,可以参考借鉴(顺手求个start感谢):

接入Bmob数据库实现动态数据

1.注册登录Bmob后端云-->创建数据库(添加应用)-->添加表(都是傻瓜式添加操作,务必按下面参考资料走,非常详细简单)

参考资料走一波:帐号

2.查看官方操作文档()把要增删查改到数据库的数据打通

我的使用案例:

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

小程序开发初体验,从静态demo到接入Bmob数据库完全实现  小程序开发文档 第12张

②在要用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

发布小程序

1.提交代码

小程序开发工具-右上角“上传”

小程序开发初体验,从静态demo到接入Bmob数据库完全实现  小程序开发文档 第13张

2.提交审核

①设置你的小程序信息

小程序页面-设置-基本设置

②提交审核(要填你的功能页面信息,尽量把大页面的填好填满,不然会打回重新审核)

小程序页面-管理-版本管理-审核版本

小程序开发初体验,从静态demo到接入Bmob数据库完全实现  小程序开发文档 第14张

③如果有打回,按照他反馈信息进行修改,再提交审核即可。

过程中遇到琐碎笔记

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": "设置"

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' }) },方式二:在.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>方式三:带参数跳转页面 <navigator url="../redPackagesDetail/redPackagesDetail?userName={{item.userName}}">GugaLiz</navigator >

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>js页面

Page({ /** * 页面的初始数据 */ data: { counts:[{userName:"GugaLiz",_sumMoney:2},{userName:"Echo",_sumMoney:12}] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log(options.userName); //输出url带过来的参数 },})其它(参考官方文档的API):

评论列表暂无评论
发表评论
微信