微信小程序(基本使用)

什么是小程序?

一种不要安装下载即可使用的应用,不用关心安装过多应用,小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

• 整个小程序所有分包大小不超过 8M
• 单个分包/主包大小不能超过 2M

好处:

• 平台封闭，上手简单
• 开发成本低
• 用户体验好
• 使用方便

安装:

首先下载安装微信开发者工具

启动:

可以使用微信扫码登录

登录成功后会出现项目列表

新建项目

注意:他里面有个AppID,最好注册一个,不推荐使用测试号

点击注册,按照步骤完成后找到开发管理,点击开发设置,就能找到你的AppID了

新建项目完成

文件介绍

sitemap.json文件 用来配置小程序及其页面是否允许被微信索引
project.config.json文件 项目偏好设置
app.wxss文件 全局css文件
app.json文件 对整个小程序的全局配置
app.js文件 小程序的脚本代码，可监听并控制整个程序的生命周期，并且是全局变量声明的地方

app.json配置文件

pages

它里面的路径相当于vue 的路由,谁在上谁先显示

index:首页文件
logs:启动日志文件

window

window的配置项

属性	类型	描述
backgroundTextStyle	String	窗口背景颜色
navigationBarBackgroundColor	HexColor	导航栏背景颜色
navigationBarTitleText	String	导航栏标题文字内容
navigationBarTextStyle	String	导航栏标题颜色
style	String	指定使用升级后的weui样式
sitemapLocation	String	指明 sitemap.json 的位置

底部导航配置

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",		//文本内容
        "iconPath":"/icon/home.png", //图片地址
        "selectedIconPath":"/icon/home-active.png" //点击后的图片地址
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath":"/icon/list.png",
        "selectedIconPath":"/icon/list-active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "用户",
        "iconPath":"/icon/user.png",
        "selectedIconPath":"/icon/user-active.png"
      }
    ]
  }

效果图:

模板语法

定义模板

使用name属性,作为模板的名字

<template name="a">
  <view>模板</view>
</template>
<view>
  <text>模板之外内容</text>
</view>

数据渲染

data: {
    message:"测试"
  }

<view>{{message}}</view>

组件属性

 <view id='{{id}}'></view> 

data:{
    id:'a'
}

引用

WXML 提供两种文件引用方式import和include

import

import引入模板内的内容

<import src="/pages/templates/a.wxml" />

include

include引入模板外的内容

<include src="/pages/templates/a.wxml" />

条件渲染

wx:if相当于vue的v-if

<view wx:if="{{show}}">点击</view>

data: {
    show:true
 }

wx:for相当于vue的v-for

<view wx:for="{{aa}}"></view>

data:{
	aa:[{a:1},{a:2}]
}

总结:

本文主要写了小程序的安装与基本使用,小程序和vue差不多,比较简单易学,想要了解更多的可以访问官网