E企盈营销工具技术服务商 热线:4006-838-530

微信小程序入门篇

E企盈直播平台营销卖货系统

本文简单介绍如何完成一个微信小程序入门demo的开发,以及它与WEB开发有何异同。适合初学者学习,有HTML/CSS/Vue.js基础的同学将更容易理解文章的对比角度。安装开发工具工欲善其事必先利其器,小程序开发使用的IDE是——微信开发者工具。前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装。打开小程序开发者工具后,需用微信扫码登录开发者工具。小程序宿主环境我们称微信客户端给小程序所提供的环境为宿主环境。 小程序的运行环境分成渲染层和逻辑层,其中 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用JsCore线程运行JS脚本。程序与页面通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。 小程序代码构成JSON配置JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色。  1. app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。2. project.config.json 在工具上做的任何配置都会写入到这个文件, 当你重新安装工具或者换电脑工作时, 开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。3. page.json 指的是用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。让开发者可以独立定义每个页面的一些属性,例如顶部颜色、是否允许下拉刷新等等。{  “pages”: [    “pages/index/index”,    “pages/me/index”  ],  “window”: {    “backgroundTextStyle”: “light”,    “navigationBarBackgroundColor”: “#DF0029”,    “navigationBarTitleText”: “签到打卡”,    “navigationBarTextStyle”: “white”  },  “tabBar”: {    “color”: “#000”,    “selectedColor”: “#426EB4”,    “list”: [      {        “pagePath”: “pages/index/index”,        “text”: “打卡”,        “iconPath”: “images/index/sign_gray.png”,        “selectedIconPath”: “images/index/sign_blue.png”      },      {        “pagePath”: “pages/me/index”,        “text”: “我的”,        “iconPath”: “images/me/me_gray.png”,        “selectedIconPath”: “images/me/me_blue.png”      }    ]  },  “style”: “v2”,  “sitemapLocation”: “sitemap.json”}WXML 模板1. 标签名字有点不一样换个思路,既然大家都需要这些组件,为什么我们不能把这些常用的组件包装起来,大大提高我们的开发效率。  2.多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式 MVVM 的开发模式(例如 React, Vue),提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM,JS 只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。   通过 {{ }} 的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。!–index.wxml–view class=”container”  map id=”map” longitude=”{{longitude}}” latitude=”{{latitude}}” scale=”16″ show-location style=”width: 100%; height: 360px;”  /map  view class=”bottom”    button type=”primary” open-type=”getUserInfo” plain=”true” lang=”zh_CN” bindtap=”bindViewTap”签到/button  /view/viewWXSS 样式1. 新增了尺寸单位。在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。2. 提供了全局的样式和局部样式。你可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。3.   WXSS 仅支持部分 CSS 选择器/**index.wxss**/.container{  padding: 0;}.bottom{  padding: 1.5rem 0;}JS 逻辑交互在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。//index.jsPage({  data: {    latitude: 29.61612895289891,    longitude: 106.50210664019774  },  //事件处理函数  bindViewTap: function () {    wx.navigateTo({      url: ‘../logs/logs’    })  }})事件1.什么是事件事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息,如 id, dataset, touches2.使用事件 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。发送请求方式1.wx.request()只支持https,需要ICP备案2.云函数(第三方库)根据第三方库决定http/https,可以不备案

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序入门篇
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏