小程序开发初体验,从静态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
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
声明:
// 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文件中添加代码
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.页面跳转的方式:
页面 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>标签类似
<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数据库完全实现相关推荐
- 微信小程序开发初体验
前言 最近不太忙,正好前两天看到园子里的大牛分享的微信小程序前端的UI界面--WeUI,看着非常不错,所以尝试着写了一下微信小程序 一.简单介绍下WeUI WeUI 是一套同微信原生视觉体验一致的基础 ...
- 融云im小程序集成初体验
融云im小程序集成初体验 最近领导让做一个小程序端的聊天功能,基于多方考虑,最终选择了融云的im来实现,那就先写个demo体验下吧. 首先呢,当然是查看官方文档,文档地址如下: https://doc ...
- 小程序 | 基于WAMP的新闻网小程序开发(体验全栈式开发微信小程序)
之前学习微信小程序开发,主要是基于JS.WXML.WXSS的前端开发,对于后端技术不精的我也是使用了微信开发者工具中的云开发功能,但是今天突发奇想,特别想体验一下全栈式开发微信小程序,学习了一下基于W ...
- 微信小程序 之 初体验(24点游戏)
根据网上的教程,申请了小程序开发,试着玩玩哈. 申请教程: http://www.ym360.cn/4049587.html 主要熟悉了一下小程序开发,熟悉了下各个组件 主要写了个九九乘法表.和24点 ...
- taro 重新加载小程序_Taro开发微信小程序的初体验
了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React ...
- QT入门学习之软件程序开发初体验
使用Qt Creater软件编写一个"Hello World"程序,初步了解Qt Creater设计应用程序的基本过程. 1. 新建一个项目过程 1)打开Qt Creater软件, ...
- 小程序AI初体验 | 做一款实时识别车辆报价的小程序
- 如何快速开始微信小程序开发?
如何快速开始微信小程序开发? 小游戏是微信小程序中的一种分类,如果要做一款微信小游戏,就是在微信小程序中开发. 一个微信小程序是如何开发的呢?很多人尤其程序员会对这个问题感兴趣,本文将介绍如何快速注册 ...
- 微信小程序开发导航:精品教程+网友观点+demo源码(5月9日更新)
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
最新文章
- python导入自定义模块和路径问题
- 风险案例-25期-与有过合作经历客户在新合同约定中过于简单、范围不明确,导致客户对新需求工作量不认可...
- Linux系统下挂载Windows分区
- SharePoint【调试,诊错系列】-- 开发环境中不同调试对象的Attach方式
- 如何解压缩.7z 001,.7z002....
- 框式交换机指示灯提示信息
- python绘制三维图散点图_python 绘制三维图形、三维数据散点图
- 双网卡mode6模式 同时工作 冗余互备
- Light oj 1233 - Coin Change (III) (背包优化)
- 研究生学习生活日记——第二次组会
- 利用文心大模型制作多功能机器人
- 教师招聘计算机面试说课稿,教师招聘面试常见问题_ _信息技术说课稿.doc
- playm3u8插件 android,Playm3u8插件下载|Playm3u8插件 免费版_最火软件站
- 好友克隆自助下单网站_可口可乐的成功可以这样复制!
- 网页调用迅雷的JS(支持客户端版和网页版)
- 网络爬虫,淘宝API商品详情测试(抓取详情数据)
- 区分定理(Theorem)、引理(Lemma)、推论(Corollary)等概念
- 循环函数:while循环和for循环及函数定义
- 深入探究linux_深入探究GraphQL查询
- Qt编写物联网管理平台22-报警联动
热门文章
- 分号是不是c语言的一部分,问什么C程序里总是提示缺少分号;,而明明有分号?...
- 女士怎么就不适合PhP呢,女人可以不美丽,但不能不智慧
- 计量经济学实验报告计算机,计量经济学-实验报告.doc
- oracle trigger 延迟执行_一文详解Spring任务执行和调度
- 图数据库_ONgDB图数据库与Spark的集成
- 流浪地球开机动画包zip_影视日报|合家欢动画电影quot;许愿神龙quot;定档1.15;流浪地球加长版定档11.26...
- 【Pytorch神经网络理论篇】 18 循环神经网络结构:LSTM结构+双向RNN结构
- JS高级——模块化学习笔记
- Mongodb 账户权限配置
- Chapter1-5_Speech_Recognition(Alignment of HMM, CTC and RNN-T)