ltb8r.com

「基础知识」微信小程序实战教程

微信小程序的语法类似于vueJS。 尚未学习vueJS的学生尝试先学习vue,然后观看本教程。

首先在微信平台注册一个账号,获取开发者AppID。

例如,下载微信小程序的开发人员工具。 安装完成后,打开开发人员工具以创建一个项目,并在项目名称和位置中填写AppID。

文件目录及每个文件的功能

微信小程序文件有四种类型,即.wxml文件,.wxss文件,.js文件和.json文件。 其中,.wxml对应于.html文件,.wxss文件对应于.css文件,.json文件是配置文件。

pages文件夹中的每个文件夹代表一个页面。 新创建的项目有两个页面,四个索引和日志页面。 每个页面包含.js文件,.wxml文件,.wxss文件和.json文件。 四种类型的文件的作用将在后面讨论。

utils文件存储工具。 该文件夹是可选的,可以直接删除。

初学者可以暂时忽略project.config.json和sitemap.json。

.wxml文件

.wxml文件类似于我们编写的.html文件,但是标签有些不同。

使用<view> </ view>标签代替<div> </ div>,使用<image> </ image>代替<img />,使用<block> </ block>标签代替<template> </  template>,引入<text> </ text>标签等,将来你在做项目时会学到更多标签。

<!--新建项目的index.wxml文件-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

.wxss文件

.wxss文件就是.css文件。 在apps.wxss中控制全局样式,并在pages文件夹中的页面文件的.wxss文件中控制本地样式。 本地样式比全局样式具有更高的优先级。

微信小程序推荐的布局方式是弹性布局( 弹性布局快速入门点这里 ),使用弹性布局可以很快速的搭建我们的项目。

为了适应具有不同屏幕尺寸的各种设备,微信小程序采用了响应单位rpx,使用rpx单位就像使用百分比作为单位来实现响应式布局。 rpx是一种相对大小,当我们使用iphone6机型时,1px = 2rpx,iphone6的大小为375px * 667px,这时rpx为750rpx * 1334rpx。 关于rpx的更多了解见wxss.html#尺寸单位

.json文件

.json文件是项目的配置文件

//-新建项目的app.json文件
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

pages是存放所有页面的数组,每一个使用到的页面都需要写入pages内,不需要写文件后缀,window属性配置的是状态栏的样式,如navigationBarBackgroundColor用于设置背景色,navigationBarTitleText设置状态栏显示的文本,navigationBarTextStyle设置状态栏文本的颜色,只能传入black/white,除此之外还可以配置底部导航栏tabBar等等。

app.json文件进行全局配置,每个页面文件夹下还有一个.json文件用于局部配置,局部配置只能配置window属性

//局部配置.json文件,这里的配置会覆盖app.json中的window属性
{
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
}

注意事项

  • 必须用一对大括号将属性包围起来,写成json字符串的格式。
  • 属性名必须用双引号包围起来.
  • .json文件中不可以写注释。

观看完本篇文章后,如果想再深入了解微信小程序,请看「进阶知识」微信小程序实战教程

免责声明:本站所有PPT模板资源均来自用户分享和网络收集,仅供学习与参考,请勿用于商业用途,如果损害了您的权益,请联系网站客服处理
本文地址:https://www.ltb8r.com/webseo/84.html
打赏 微信扫一扫 微信扫码打赏

相关推荐

  • 微信小程序 微信小程序开发组件初步使用和配置

    微信小程序基础开发详解知识,关于一些小程序的组件初步使用和配置项的讲解。…

    04-13 10:35 104
  • 微信小程序 「用户登录」微信小程序登录验证实现

    对于部分页面添加登录验证,当用户未登录时,进入页面,该页面自动转到登录页面。 成功登录验证后,回调到登录发起页面。…

    04-12 13:56 153
  • 微信小程序 「开发阶段」微信小程序基础教程

    要开发微信小程序之前,需要做一些准备工作,例如,下载微信开发者工具、创建本地小程序项目,这样我们就进行简单的微信小程序开发。…

    04-10 10:59 91
  • 微信小程序 「网络请求」微信小程序开发中的http请求总结

    微信小程序中的网络通信只能与指定的域名进行通信,微信小程序包括四种类型的网络请求。普通的HTTPS请求(wx.request)、上传文件(wx.uploadFile)、下载文件(wx.downloadFile)、WebSocket通…

    04-09 10:15 95
  • 微信小程序 「微信小程序」CSS3 弹性布局快速入门

    弹性布局是新一代的布局方法,在传统布局中使用浮动布局会给我们带来很多弊端,例如高度依赖HTML代码结构的CSS代码等,下面,我将使用一些示例让你快速学习弹性布局。…

    04-08 10:33 216