微信小程序基础1

潜水鹰
417 阅读4分钟

1，如何创建项目

微信开发者工具 > 左上方 > 项目 > 新建项目

2，项目结构与文件作用

image.png

【pages】
      【index】
          index.js
        index.josn
        index.wxml (首页)
        index.wxss
      【logs】
          logs.js
        logs.json
        logs.wxml
        logs.wxss
【utils】
      utils.js
.eslintrc.js
app.js
app.json  (一个对象，可以配置新增界面)
app.wxss
project.config.json （针对项目的配置，例如开发背景色，当换台电脑也会读取当前的配置）
sitemap.json

2.1，app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#409EFF", // 顶部颜色
    "navigationBarTitleText": "我是标题", // 顶部标题
    "navigationBarTextStyle":"black" // 顶部右边的分享颜色 black | white
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

我们简单说一下这个配置各个项的含义:

  1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
  2. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

2.2，app.js

全局js文件

App({
   onLaunch() { // 小程序启动后触发
  
  } 
})

2.3，app.wxss

全局样式文件，全局都用的样式可以在这里定义

2.4，一个界面的完整构成

image.png

已初始界面index文件夹下面的为例

  • index.json 是配置界面，可以在这里重置顶部栏的颜色等熟悉，覆盖全局app.json的一些配置。
  • index.wxml 类似Vue的区域，微信封装了一些方法标签，类似html。
  • index.wxss 类似Vue的区域。写界面样式的
  • index.js 类似Vue的区域，里面有响应式数据与一些生命周期函数和自定义的方法

2.4.1，index.js

简单的界面使用Page构造器，组件使用Component构造器【官网介绍】

Page({
  // 【1】响应数据区
  data: {
    text: "This is page data."
  },
  // 【2】生命周期函数
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  // 【3】自定义的方法
  wlClick(e) {
    console.log("我点击了")
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

2.4.2，wxml文件

.wxml就是类似.vue的界面文件中的

  • 其中点击调用时间从Vue的@click换成了bindtap="wlClick"
  • 方法调用响应区数据的方法是this.setData({wldata1: '111'})
  • 输入区双向绑定数据

2.4.3，wxss文件

.wxss 就是样式文件，这是局部的样式文件，如果有全局样式，建议在app.wxss中定义。

3，路由

3.3.1 新建界面

在app.json中的pages数组中可以新建界面

  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]

3.3.2 界面跳转与数据接受

wx.navigateTo({
  url: `../outPage/outPage?code=${code}&name=Tom`,
})

第二个界面的生命周期onLoad中接受
onLoad: function (options) {
  console.log('option', options)
}

4，小程序的内部方法

1，获取用户定位

首先需要在app.json中配置pmission

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#409EFF",
    "navigationBarTitleText": "BarTitlewl",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

然后在js中获取

wx.getLocation({ // 需要在app.json pmission字段
  type: 'wgs84',
  success: (res) => {
    let latitude = res.latitude // 纬度
    let longitude = res.longitude // 经度
    console.log("纬度->", latitude, ",经度", longitude)
  }
})

2，调用扫一扫功能

wx.scanCode({
      success: (res) => {
        console.log(res)
      }
    })

5，如何引入第三方组件（vant为例）

5.1，npm初始化

首先在终端输入npm init，然后依次取包名（packag.json），写描述什么的。。。

5.2，安装vant

npm i @vant/weapp -S --production

5.3，配置project.config.json

目的是在编译前规定从哪儿编译，编译后的文件去哪里。

"packNpmRelationList": [
  {
    "packageJsonPath": "./package.json",    npm路径
    "miniprogramNpmDistDir": "./"   编译后路径
  }
],

5.4 构建npm（将vant转换成小程序可识别的语言）

微信开发者工具左上角的【工具】点击开，然后选择构建npm

  • 特别注意：构建前必须先配好project.config.json

5.5 开启使用npm模块

微信开发者工具右上角【详情】点击，选择【本地设置】，勾选【使用npm模块】 image.png

5.6，按需引入组件

在pages > index.json 中的usingComponents中配置需要的组件 也可以在app.json中添加这个字段进行全局配置

  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }

5.7，界面中使用

在pages > index.wxml中使用组件

<van-button type="danger">默认按钮</van-button>
avatar
文章
阅读
粉丝