小程序代码编写到上线

     参与开发的小程序项目今天发布上线了,前端部分全部我负责,在此把自己的一些感悟总结下。    

     小程序的很多知识点都是和html,css,js相通的,也参考了一些框架的思想:数据绑定,组件化开发,生命周期等等,不是很难,有一定的html, css, js基础再熟悉一下小程序开发文档就可以开发。这次开发的小程序项目相对简单,功能不是很复杂,主要上就是对html,css,js知识结合小程序的使用巩固,也运用了一些函数复用,全局数据,由于比较简单自定义组件也没有必要使用。小程序比较好的地方之一就是不用去操心兼容移动设备尺寸不同的问题,一个单位rpx,就可以帮你搞定所有移动设备上布局一致。    

      在新建项目时自动生成的app.js, app.json, app.wxss 是对所有页面的一些设置。app.js是可以用来保存一些很多页面都会使用到的数据,如后台接口中相同的url地址,如接口地址改变了我们只需要再app.js中改一处就可以了这样很方便也不容易遗漏出错,还有小程序一加载就获取到的一些数据(通过其生命周期)等等。在其他页面通过 var app = getApp()  app.你需要使用的数据名,获得数据。app.json是用到最多的,用来进行一些全局性的配置,如你毎新建一个页面就需要到该文件的pages选项中注册,也可以通过先在pages选项注册,这样可以快速创建4个页面模板,还有如window,tabBar等选项。app.wxss是用来设置全局样式的,对所有页面都有效。    

      很多小程序都需要获取用户的信息。刚写这块的时候折腾了好一会,很多博客上写的内容有点旧了,不一定适用。目前用来获取用户信息的组件主要是button组件,<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo" >登录</button>,在getuserinfo事件处理程序的事件对象中包含用户信息,如onGotUserInfo(e){},e.detail.userInfo保存的就是用户信息。首次获取会弹出授权框需要用户授权,即使客户拒绝授权后期点击还是会弹出授权框。有时候后台可能会用到用户信息,还会需要用户的code, code可以通过wx.login API中的sucess回调方法中的参数获取,如sucess: fucntion(res){},res.code就可以获得用户的code,和用户信息一起传给后台就可以了。    

      函数复用在小程序中也是用得比较多的,这样可以减少我们的代码量,通常我们会把一些用到多次的方法单独放在一个js文件里,这个文件名通常为util.js, 当然你也可以按你自己喜好命名,定义好的函数需要在文件底部用module.exports输出下,在需要用到的页面js文件中引用,如 var util = require(util.js文件地址), 然后util.函数名就可以使用了。    

      目前用到的生命周期函数不是很多,主要是onLoad 和onShow,一个还是页面加载后一个是页面显示后,功能很相似,主要区别就是onLoad只加载一次,onShow每次进入该页面都会加载。

       一个产品多半是会用到支付的,小程目前只支持微信支付。支付的话主要是后台的工作,前端方面到没有多少东西。前端方面只需要在客户点击支付时调用后端支付接口,并把后端需要的数据传过去,调用成功的话后台会返回一些调用微信支付API需要的数据,之后根据返回数据调用支付API即可。  

       代码写完,预览用真机扫二维码测试也没什么问题就可以点击上传,把代码上传到微信公众平台小程序后台管理系统上了,上传后就可以到公众平台后台管理系统设置为体验版再用真机测试下或者直接提交审核。审核时间不一定,3个小时 半个小时都有过,审核通过点击发布就可以了,发布后网上可能不会实时更新,过一两分钟就好了。

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值