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
打赏 微信扫一扫 微信扫码打赏

相关推荐

  • 百度快照 什么是百度快照? 它如何帮助SEO?

    1.什么是百度快照? 百度快照是一个基本概念,之前也曾提到过。 例如,如果您在百度上搜索 小熊吧织梦仿站 ,则搜索到的网站后面会出现百度快照。 单击第一个百度快照,顶部显示…

    08-08 09:37 177
  • 微信小程序 小程序实现简单语音聊天

    框架相关 Demo采用Mpvue框架,后端的WebSocket采用Node.js,文件服务器直接使用的微信 小程序 的云开发的存储。 储备知识 微信小程序录音控制器:recorderManager。 微信小程序音频控制器:…

    07-28 09:09 183
  • 自适应 电脑pc端的网页自适应显示在移动端方法

    当我们将一个pc端的网页放到移动端的时候,移动端浏览器会将pc端的网页按照一定的比例完整的显示出来,这是因为移动端的浏览器默认的会将网页渲染在一个比例比较大的viewport中排…

    07-02 10:26 107
  • 微信小程序 微信小程序开发组件初步使用和配置

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

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

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

    04-12 13:56 167