微信小程序 入门（基本使用）

什么是微信小程序

• 微信小程序简称⼩程序，是⼀种不需要下载安装即可使⽤的应⽤，它实现 ”触手可及“、”即用即走“，无需下载安装，不用关心安装过多应用，⽤⼾扫⼀扫或搜索即可打开应⽤

他的好处是：

• 平台封闭，上手简单
• 跨平台运行
• 使用方便

使用微信小程序的前提你要准备以下环境配置

1. 注册账号

   https://mp.weixin.qq.com/wxopen/waregister?action=step1
   
   建议使用全新的邮箱，没有注册过其他小程序或者公众号的。
   

2. 登录小程序

      https://mp.weixin.qq.com/
   

3. 下载微信开发者工具

      https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
   

4. 打开小程序的文档（因为小程序的更新速度很快 所以你要借鉴文档开学习 文档中有你所需要的继续很大一部分的内容）

    https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html
   

   也可以搜索 微信公众平台

上述准备好后就可以开始使用了

1. 创建 （打开你下载的微信开发者工具）
   
   
   

2. 使用开发者工具（上步创建完之后就会自动出现下图）
   
   通过上图你会发现这个跟vue很像
   编译器中的文件介绍

    pages ： 页面文件夹
    	index ：首页文件
    	logs ： 日志文件
    utils：第三方的工具js
    app.js ：项目的全局入口文件
    app.json ：全局配置文件
    app.wxss：全局的css样式
    project.config.json：项目的配置文件 eg：appid
    sitemap.json：这个可以让你的小程序在微信中搜索到
   

知道文件是什后 下面我们就开始使用把

1. 在全局app.json中的pages中配置路径（如果没有就会自己创建同样会自己创建出里面的那些文件）看下图
   
2. 在创建的文件中写一点样式就会在左边模拟器中显示出来
   

注意:在app.json中的pages里面的配置要注意先后顺序

2. 底部栏
   然后你在小程序文档中（也就是微信公众平台）里面会发现 下图

app.json 代码

使用时记得把注释删掉
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
     "pages/user/user"
  ],
  "window":{
    "backgroundTextStyle":"light",
    //顶部的背景颜色
    "navigationBarBackgroundColor": 
     "#00ff33",
     //你的微信名称
    "navigationBarTitleText": "修炼万年的猪", 
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        //这是下面的图标（这是在不点击的情况下显示的 这个image是你自己创建的文件夹）
        "iconPath":"/image/home.png",
        //这是下面的图标（这是在点击的情况下显示的）
        "selectedIconPath": "/image/home.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath":"/image/receipt.png",
        "selectedIconPath": "/image/receipt.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "用户",
        "iconPath":"/image/user-full.png",
        "selectedIconPath": "/image/user-full.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

效果如图

3. 使用js 这里用的user中的user.js文件

  data: {
      message:"测试",
      show:true,
      array: [{
        message: 'foo',
      }, {
        message: 'bar'
      }]
  },

然后再user.wxml中使用{{}}打印出来

<view class="container">
    <text class="aa">猪王就是你</text>
    {{message}}
</view>

就可以在页面上打印出来（会不会发现跟vue很像）

4. 条件渲染 wx:if="{{变量}}"
   看代码
   user.js代码

  data: {
      message:"测试",
      show:true
  },
  fn(e){
  // console.log(e);
  console.log(this);
  this.setData({
    message:'修改',
    show:!this.data.show
  })
},

user.wxml代码

//catchtap触发一个函数
    <view wx:if="{{show}}">我会消失</view>
    <button catchtap="fn">点击触发</button>

5. 列表渲染
   wx:for="{{遍历的名字}}"

user.js代码

  data: {
      message:"测试",
      show:true,
      array: [{
        message: 'foo',
      }, {
        message: 'bar'
      }]
  },

user.wxml代码

    <view wx:for="{{array}}">
        {{index}}: {{item.message}}
    </view>

6. 模板

user.wxml代码

    <import src="/pages/templates/a.wxml" />
    <template is="a"></template>
    <template is="b"></template>
    <include src="/pages/templates/a.wxml" />

a.wxml代码

//name是给这个模板一个名字
<template name="a">

    我是a模板
</template>
<template name='b'>
  我是b模板
</template>
<view> 模板外的内容 </view>

效果图

总结：

• 小程序的更新速度很快 所以 他文档中的属性就不用刻意去记 因为你还么记住他就已经更新了 你还会发现他的语法跟vue的很像
• 很好上手
• 是⼀种不需要下载安装即可使⽤的应⽤