没有网站如何做cpa推广,山东济南网站开发,深圳四站合一网站建设电话,网站做多个产品之前我胖汾公司年会、问我能不能帮忙搞个小程序方便他们进行游戏后的惩罚/抽奖使用、出了个简单的设计图、大概三天左右做了个简单的小程序、目前提交审核了。对于写过一小段时间vue来说小程序很容易上手、写法和结构差不多。 ----------------- 这里整理的内容大致划分四个部分…之前我胖汾公司年会、问我能不能帮忙搞个小程序方便他们进行游戏后的惩罚/抽奖使用、出了个简单的设计图、大概三天左右做了个简单的小程序、目前提交审核了。对于写过一小段时间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/ ③APIhttps://developers.weixin.qq.com/miniprogram/dev/api/ 2.WEUIUI组件这里选的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 -- ctrilV晓得了吧。 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 classiconfont 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以后的小程序完全代码在这里求个顺手starthttps://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/setting7 ],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.wxmlbutton classweui-btn typedefault plaintrue bindtappackageEnter抽奖/button
页面 index.jspackageEnter:function(){wx.navigateTo({url: ../redPackage/redPackage})}, View Code 方式二在.wxml文件中直接写跟html的a/a标签类似 navigator url../redPackagesSetting/redPackagesSetting跳转/navigator view classsettingnavigator url../redPackagesSetting/redPackagesSettingtext classiconfont icon-shezhi stylecolor:#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:keyindexnavigator url../redPackagesDetail/redPackagesDetail?userName{{item.userName}}view classweui-cells weui-cells_after-titleview classweui-cell weui-cell_accessview classweui-cell__bdview styledisplay: inline-block; vertical-align: middle;width:50%;{{item.userName}}/viewview classweui-badge stylemargin-left: 5px;共{{item._sumMoney}}元/view/viewview classweui-cell__ft weui-cell__ft_in-access stylefont-size: 0 view styledisplay: inline-block;vertical-align:middle; font-size: 17px; 详细/viewview classweui-badge weui-badge_dot stylemargin-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 其它参考官方文档的APIhttps://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
