小程序开发初体验,从静态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

声明:

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.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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/484200.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

演讲实录丨徐宗本院士:如何突破机器学习的先验假设?

来源&#xff1a;中国人工智能学会2021年6月5日至6日&#xff0c;由中国科学技术协会、中国科学院、中国工程院、浙江省人民政府指导&#xff0c;中国人工智能学会、杭州市人民政府主办&#xff0c;杭州市余杭区人民政府筹备组承办&#xff0c;浙江杭州未来科技城管理委员会具体…

hbase单机模式配置

1.软件 https://pan.baidu.com/s/1mgPA8s02FFyPqcc9DmR-FA 提取码: 337t 2.在安装hbase之前&#xff0c;确保你的电脑已经安装Hadoop3.1.3&#xff0c;hbase对Hadoop具有版本依赖。 3.将hbase压缩文件解压到/usr/local目录下&#xff0c;先切换到压缩文件所在目录&#xff0…

QT QTransform与QMatrix 有啥区别?

刚开始学习QT&#xff0c;我使用的是QT5.12进行开发&#xff0c;要不时地查阅QT的官方帮助文档~ 仔细阅读QT官方帮助QTransform类以及QMatrix类&#xff0c;发现两个类的作用描述一模一样&#xff08;“The QTransform class specifies 2D transformations of a coordinate sys…

hbase伪分布式配置

1.在单机模式的基础上进行配置&#xff0c;打开hbase-env.sh。 vim /usr/local/hbase/conf/hbase-env.sh2.配置HBASE_CLASSPATH为hadoop安装目录下的conf目录&#xff0c;即 /usr/local/hadoop/conf。JAVA_HOME、HBASE_MANAGES_ZK之前已经配置好了。 export HBASE_CLASSPATH/…

机器学习是科学还是“炼金术”?

作者:Samuel Flender译者:王强策划: 刘燕在实证领域&#xff0c;科学的严谨性是从假设开始塑造的。业界对机器学习研究的科学严谨性的质疑声越来越多了。在 2017 年 NIPS 会议上的一场 演讲 中&#xff0c;当时就职于谷歌 AI 的 Ali Rahimi 和 Ben Recht 认为 ML 已经成为了一种…

谷歌发布史上最强人类大脑「地图」,在线可视3D神经元「森林」!

来源&#xff1a;机器学习研究组订阅突触&#xff0c;是神经网络的「桥梁」。我们知道&#xff0c;人类大脑有860亿个神经元&#xff0c;因为有了突触&#xff0c;才可以把神经元上的电信号传递到下一个神经元。长久以来&#xff0c;科学家们一直梦想通过绘制完整的大脑神经网络…

javaweb c3p0连接oracle12c

最近在搞javaweb&#xff0c;在连接池上碰到了一系列的问题&#xff0c;在Junit测试时&#xff0c;oracle12c报错&#xff1a; ORA-28040: 没有匹配的验证协议 百度解决&#xff1a;修改 $ORACLE_HOME/network/admin/sqlnet.ora 加入如下:   SQLNET.ALLOWED_LOGON_VERSION8 之…

数学的意义——席南华院士科普讲座实录

来源&#xff1a;中国数学会编辑&#xff1a;nhyilin谢谢主持人的介绍&#xff0c;谢谢大家在周末星期六的下午听这个报告。我今天要说的是“数学的意义”。数学&#xff0c;要说爱你不容易&#xff0c;不管你是天才还是庸人&#xff0c;都是它虐待的对象&#xff0c;差别在于有…

C#穿透session隔离———Windows服务启动UI交互程序

在Windows服务里面启动其他具有界面的应用程序&#xff0c;需要穿透session隔离&#xff0c;尝试了很多种方法&#xff0c;都可行&#xff0c;现在一一列举下来&#xff0c;并写下几个需要注意的地方。 需要注意的地方 首先要将服务的Account属性设置为LocalSystem&#xff0c;…

谈谈相控阵雷达为何如此先进

作者&#xff1a;寒木钓萌来源&#xff1a;电子万花筒对于很多人来说&#xff0c;相控阵雷达非常耳熟&#xff0c;但它的原理又是什么呢&#xff1f;传统雷达与相控阵雷达之区别要说相控阵雷达的原理&#xff0c;就不得不提一下传统雷达的工作方式。影视中&#xff0c;如果非要…

华为在5.5G未来技术演进的六个方向!

来源&#xff1a;5G产业园”2021年8月3日&#xff0c;华为和中国移动在北京召开主题为“双链融合&#xff0c;共创5G可持续发展未来”的5G-Advanced创新产业峰会。华为常务董事、ICT产品与解决方案总裁汪涛在峰会上发表了“合作创新&#xff0c;5.5G使能万物智联”的主题演讲&a…

引用传递

引用传递的核心意义&#xff1a; 同一块堆内存空间可以被不同的栈内存所指向&#xff0c;不同的栈内存可以对同一个堆内存进行内容的修改。 实例1&#xff1a; class Message {private int num 10;public Message(int num){this.num num; //2.this是代表msg这个对象&#…

线程知识点(一)—— 程序、进程、线程之间的区别与联系、Java的线程状态和生命周期

1 程序、进程、线程之间的区别与联系 三者之间的形象化理解&#xff1a; * 程序&#xff1a;代码实现了功能&#xff0c;就是程序&#xff0c;是静态的&#xff1b; * 进程&#xff1a;执行中的程序就是进程&#xff0c;是动态的&#xff1b; * 线程&#xff1a;进程内的一个执…

官方全面解读“5G+工业互联网”

来源&#xff1a;工信部网站未来智能实验室的主要工作包括&#xff1a;建立AI智能系统智商评测体系&#xff0c;开展世界人工智能智商评测&#xff1b;开展互联网&#xff08;城市&#xff09;大脑研究计划&#xff0c;构建互联网&#xff08;城市&#xff09;大脑技术和企业图…

为什么要学数学?因为这是一场战略性的投资

来源&#xff1a;数学内参如果将数学学习的好坏仅仅理解为“刷题”的数量和速度&#xff0c;那充其量也只能成为一名熟练的数学工匠。我们所受的数学训练&#xff0c;所领会的数学思想和精神&#xff0c;所获得的数学教养&#xff0c;无时无刻不在发挥着积极的作用&#xff0c;…

滤波 放电速度比充电慢 模电

我不理解为什么这里放电速度比充电速度慢&#xff1f; 因为充电时间常数小&#xff0c;而放电时间常数大 转载于:https://www.cnblogs.com/china520/p/10389477.html

Hexo如何绑定个人域名

前两天用HexoGitHub搭建好了自己的个人博客https://www.serendipper-x.cn/&#xff0c;默认域名github下的二级域名&#xff1a;username.github.io&#xff0c;为了提升访问速度和博客的格调&#xff0c;绑定个人域名是多数人的选择。下面给大家介绍详细过程。 购买域名 国内…

什么是涌现?

来源&#xff1a;集智俱乐部作者&#xff1a;由集智俱乐部众包生产在哲学、系统论、科学和艺术中&#xff0c;当一个实体被观察到具有其所有组成部分本身没有的属性时&#xff0c;涌现 emergence 就出现了。这些属性或行为只有当各个部分在一个更广泛的整体中相互作用时才会涌现…

人工智能vs人类智能小传

来源&#xff1a;混沌巡洋舰Alphago代表的深度网络人工智能体现了AI逐步进入未知领域的强大能力&#xff0c; 因此有人堪忧有人喜乐&#xff0c; 却极少有人戳中要害。说AI比人牛是因为它下围棋比人厉害&#xff1f; 说AI离真正的智能很遥远是因为它不能创造吗&#xff1f; 是…

IDEA换行CRLF, LF, CR的解释和默认设置

在window下开发有一个大坑&#xff0c;就是换行默认是CRLF&#xff0c;也就是回车换行&#xff0c;但是Linux下只有换行LF&#xff0c;这样代码提交后&#xff0c;会出现编译问题&#xff0c;所以最好的办法是在IDEA下设置默认为LF。 首先我们先介绍CRLF&#xff0c;LF和CR这三…