微信小程序是什么

官方的开发文档

微信小程序写的不多,随便写写

创建项目,分析工具
微信小程序有专门的编辑工具,去官网下载
然后申请一个小程序项目,获得一个appId,然后进入编辑工具就可以直接开发了
编辑工具可以设置es6编译和npm

文件分析
小程序的写法非常的像vue-cli,但是vue是一个vue文件带有html+js+css
小程序是一个页面分为四个文件,wxml+js+wxss+json(配置页面)
还有一个app.json总配置页面,一个app.js入口文件,一个app.wxss的全局css文件

新建页面

  • 在目录树上右键,选择新建 Page,将自动生成页面所需要的 wxml、wxss、js、json
  • 在 app.json 的 pages 字段,添加需要新建的页面的路径,将会自动生成该页面所需要的文件

app.json

  • 页面要被识别必须配置在app.json的page数组里,数组的第一个就是打开小程序的第一个页面,这个page数组就是vue的router.js
  • 小程序的底部菜单tabbar栏也是在这个文件里配置的,可以配置文字,图标,被选中的图标,点击的路由
  • 还有个window的对象是配置小程序的顶部颜色什么的,这个文件很重要,配置查看官方文档

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地址

数据传递

  • 在app.js里有个全局数据对象
globalData:{
   userInfo:null
}
// 获取
var app=getApp();//取得全局App({..})实例
var userInfo = app.globalData.userInfo;//取得全局变量需要的值
// 获取data的值
var xx = this.data.xx
  • 通过本地缓存,setStorage和getStorage
  • 通过路由传参
wx.navigateTo({
 url: '/pages/item/item?url=' + e.target.dataset.url
})

onLoad: function (options) {
var that = this;
console.log(options.url)
}
  • 从标签上获取data值
<view bindtap="play" data-xx="xx"></view>
play:function(event){
     var xx= event.currentTarget.dataset.xx;
}

路由跳转

  • navigateTo 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
  • redirectTo 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
  • reLaunch 关闭所有页面,打开到应用内的某个页面
  • switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

接入资源
腾讯自己家的东西都带有小程序接入的功能
比如腾讯地图
比如腾讯视频
具体查看文档

内置组件
其实也不是内置,也需要自己下载
就是weui-weapp,在微信小程序官方文档的拓展能力里有如何使用的教程

外来组件
vant-weapp
通过npm下载安装就行,用一些弹窗什么的很爽

小程序框架

  • 美团点评:mpvue
  • 京东:Taro
  • 腾讯:WePY

总结:京东的是 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
  }
})

有时间补充个自定义组件

原文地址:https://www.cnblogs.com/pengdt/p/12072482.html

时间: 2024-10-14 17:34:22

微信小程序是什么的相关文章

微信小程序--图片相关问题合辑

图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.previewImage预览图片 微信小程序之预览图片 小程序开发:上传图片到腾讯云 .NET开发微信小程序-上传图片到服务器 微信小程序本地图片处理--按屏幕尺寸插入图片 [微信小程序]上传图片到阿里云OSS Python Flask小程序文件(图片)上传技巧 小程序图片上传阿里OSS使用方法 微信小程序问题汇

微信小程序——豆瓣电影——(2):小程序运行部署

Demo 预览 演示视频(流量预警 2.64MB) GitHub Repo 地址 仓库地址:https://github.com/zce/weapp-demo 使用步骤 将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban 打开微信Web开放者工具(注意:必须是0.9.092300版本) 必须是0.9.092300版本,之前的版本不能保证正

微信小程序开发初探

一.关于微信小程序 1.1 小程序诞生的背景 张小龙说道: (1)一切以用户价值为依归→用户是微信的核心,所以微信中没有很多与客户无关的功能,比如QQ中的乱七八糟一系列东西. (2)让创造发挥价值→所有围绕微信的创造比如公众号都应该发挥其应有的价值. (3)用完即走的高效服务→这一点就厉害了word天,微信要打造一个以微信为中心的生态链,不以绑定用户为目标.比如生活中有一些不太常用的app,我们可能一年也使用不了几次,但是有时候就需要用到,微信就想要提供这样一个平台,让你可以在微信中使用这中所谓

微信小程序之使用本地接口开发

本文主要讲解如何使用本地接口进行开发,很多人都会遇到这个问题,特别是小程序上线后. 一.解决思路 在小程序开发工具设置网络代理,然后再通过Charles设置代理,将https域名转为本地接口进行访问. 以下示例的环境为win7 + 老版本的微信开发工具 二.准备工作 1.配置https域名 为小程序配置request合法域名,在登录公众号平台去设置. 2.安装Charles 下载地址:https://www.charlesproxy.com/download/ 三.配置Charles 1.安装根

带你入门微信小程序

认识微信小程序 2016年1月9日,TX启动小程序研发,于2017年1月9日正式发布.不同于微信订阅号或公众号,微信小程序被赋予了应用程序的能力,他是一种无需安装即可使用的应用,它实现了应用“触手可及”的梦想,用户“扫一扫”或者“搜一搜”即可打开应用:体现了“用完就走”的理念,用户不再需要关心是否安装太多应用问题.应用将无处不在,随时随地可用,无需卸载. 微信小程序相关技术 微信小程序自定义了一套语言,称为WXML微信标记语言,它的使用方法类似于HTML语言.另外,微信小程序还定义了自己的样式语

WordPress版微信小程序2.2.0版发布

2017年8月12日WordPress版微信小程序2.2.0版通过了微信的审核正式发布,此版本的更新以完善功能为主.主要更新的功能是:站内链接,猜你喜欢,热点文章. WordPress版微信小程序开放源码地址:https://github.com/iamxjb/winxin-app-watch-life.net 了解程序的开发历程及开发技术,建议看看相关版本的更新文章: 1.用微信小程序连接WordPress网站 2.WordPress版微信小程序1.5版本发布 3.WordPress版微信小程

微信小程序(5)--阅读器

最近用微信小程序写了一个图书阅读器,可以实现左右滑动翻页,按钮翻页,上下滚动,切换背景,控制字体大小.以及记住设置好的状态,如页面再次进来保留上次的背景色和字体大小. 由于暂时没有真实的数据接口,所以我用了静态数据. <!-- 文本 --> <view class="container" style="background:{{bodyColor}}"> <!-- 中间层,点击,头部底部显示 --> <view class=

微信小程序(4)--二维码窗口

微信小程序二维码窗口: <view class="btn" bindtap="powerDrawer" data-statu="open">button</view> <!--mask--> <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if=&qu

C#开发微信门户及应用(47) - 整合Web API、微信后台管理及前端微信小程序的应用方案

在微信开发中,我一直强调需要建立一个比较统一的Web API接口体系,以便实现数据的集中化,这样我们在常规的Web业务系统,Winform业务系统.微信应用.微信小程序.APP等方面,都可以直接调用基于JSON数据格式的Web API接口,在我之前的几篇随笔中,对这方面都有一定的介绍,本篇继续这个主题,细致深入的阐述如何在接口和源码的基础上整合Web API.微信后台管理及前端微信小程序的应用方案. 1.基于Web API的微信开发框架 首先我们各个业务模块,都应该围绕着Web API进行展开,

微信小程序实例教程(一)

序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志. 1. 获取微信小程序的 AppID 首先,我们需要拥有一个帐号,如果你能看到该文档,我们应当已经邀请并为你创建好一个帐号.注意不可直接使用服务号或订阅号的 AppID. 利用提供的帐号,登录https