powderhose 2019-12-20
微信小程序写的不多,随便写写
创建项目,分析工具
微信小程序有专门的编辑工具,去官网下载
然后申请一个小程序项目,获得一个appId,然后进入编辑工具就可以直接开发了
编辑工具可以设置es6编译和npm
文件分析
小程序的写法非常的像vue-cli,但是vue是一个vue文件带有html+js+css
小程序是一个页面分为四个文件,wxml+js+wxss+json(配置页面)
还有一个app.json总配置页面,一个app.js入口文件,一个app.wxss的全局css文件
新建页面
app.json
app.js
入口文件就是main.js,用来配置插件什么的,还有就是在入口文件的生命周期里执行用户登陆,获取用户信息什么的
wxss
wxss的图片引入需使用外链地址;
没有 Body;
样式可直接使用 import 导入;
字体宽高用vw和vh最好
生命周期
onLaunch: function(options) { // 监听小程序初始化。小程序初始化完成时(全局只触发一次) }, onReady: function(options) { // 页面初次渲染完成 // 一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。 }, onShow: function(options) { // 监听小程序显示。小程序启动,或从后台进入前台显示时,执行很多次 }, onHide: function() { // 监听小程序隐藏。小程序从前台进入后台时。 }, onUnload: function() { // 当redirectTo或navigateBack的时候调用。 // Do something when page close. }, onPullDownRefresh: function() { // 监听用户下拉动作 // 需要在页面json里配置 "enablePullDownRefresh": true }, onReachBottom: function() { // 页面上拉触底事件的处理函数 // 需要在页面json里配置 "enablePullDownRefresh": true }, onShareAppMessage: function () { // 用户点击右上角转发 }, onPageScroll: function() { // 页面滚动触发事件的处理函数 }, onResize: function() { // 页面尺寸改变时触发 }, onTabItemTap(item) { // 当前是 tab 页时,点击 tab 时触发 console.log(item.index) console.log(item.pagePath) console.log(item.text) },
渲染
// 数据绑定 <checkbox checked="{{xx}}" id="item-{{id}}" hidden="{{flag ? true : false}}">{{ name }}</checkbox> // 条件渲染 <view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view> // 循环渲染 <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="item" wx:key="idx"> {{idx}}: {{item.name}} </view>
组件
小程序的组件就是指html的标签,不过是内部的标签,微信对标签进行了封装,自带了像轮播图,图标icon组件,还有地图,画布,摄像头等等东西,让开发便捷了很多
小程序里没有div,view组件就是div
API
微信内置的方法,有登陆的,转格式的,上传文件的,发起请求的,路由跳转的,定时器,websocket,地图的,获取位置的,选择相册图片,视频,音频,画布,录音,相机,富文本,支付,扫码甚至微信运动,蓝牙,NFC充值,卡包,手机电量,陀螺仪,移动方向等等
请求响应
小程序也是用的跨域接口,需要在微信小程序后台配置接口白名单,配置后就可以访问了,必须是域名的,不能是localhost或者ip地址
数据传递
globalData:{ userInfo:null } // 获取 var app=getApp();//取得全局App({..})实例 var userInfo = app.globalData.userInfo;//取得全局变量需要的值 // 获取data的值 var xx = this.data.xx
wx.navigateTo({ url: '/pages/item/item?url=' + e.target.dataset.url }) onLoad: function (options) { var that = this; console.log(options.url) }
<view bindtap="play" data-xx="xx"></view> play:function(event){ var xx= event.currentTarget.dataset.xx; }
路由跳转
接入资源
腾讯自己家的东西都带有小程序接入的功能
比如腾讯地图
比如腾讯视频
具体查看文档
内置组件
其实也不是内置,也需要自己下载
就是weui-weapp,在微信小程序官方文档的拓展能力里有如何使用的教程
外来组件
vant-weapp
通过npm下载安装就行,用一些弹窗什么的很爽
小程序框架
总结:京东的是 React 方式编码,其他多数是vue方式。==不考虑框架==
发布
代码写完,可以直接在开发工具里提交,然后等待微信工作人员审核,审核完毕可以就可以去到微信小程序后台点击发布,就可以在手机微信里找到这个小程序了
最后总结
小程序只要js基础好,写过vue,上手非常的快,特别是在微信平台上开发,兼容等问题就很少了,而且API特别的多,去看官网就知道,真正的copy型程序员诞生之路
app.js
App({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }) } }, globalData:{ userInfo:null } })