目录

微信小程序入门开发超详细笔记一

微信小程序入门开发超详细笔记(一)

文章目录

1 引入

1.1 小程序的应用

https://i-blog.csdnimg.cn/blog_migrate/6a031460a4de17db357853028fbfd50b.png#pic_center

  • 支付宝
  • 头条
  • qq
  • 百度
  • 字节跳动
  • 微信

1.2 小程序的介绍

  • 运行在某个APP里面,比如微信:没有跨平台限制
  • 微信小程序
    • Wechat Mini Program 是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一搜即可使用

1.3 市场分类

https://i-blog.csdnimg.cn/blog_migrate/12e249ed8bfb32778cf575fcf5fc06a7.png#pic_center

1 小程序

  • 运行在某个APP里面,比如微信

2 webapp

  • 运行在浏览器上,没有跨平台限制

3 混合app

  • 运行在终端上,有跨平台限制,内部运行的是webapp

4 原生app

  • 运行在终端上,有跨平台限制,内部运行的是机器码01
1 ios
  • object-c
  • js
2 android
3 react-native
  • 一套代码开发两套的应用
  • taro

2 开发

2.1 准备

1 官网注册登录

  • 个人开发 记住AppID

    https://i-blog.csdnimg.cn/blog_migrate/8e2c2dfc18b0334a52148b102cecc38c.png#pic_center

2 工具下载

  • 在个人主页中点击 文档

  • 进入新页面后点击 工具 ,点击 微信开发者工具

  • 选择与自己电脑合适的版本进行下载

    https://i-blog.csdnimg.cn/blog_migrate/0730d3093ae863051c1380abc14ac1a7.png#pic_center

  • 进入新的页面

    https://i-blog.csdnimg.cn/blog_migrate/e90b17dbd8f113e1a44901c4456694fb.png#pic_center

  • 进行下载

    https://i-blog.csdnimg.cn/blog_migrate/72fe399f9fd82e1acd3e80b4a4a085cb.png#pic_center

2.2 入门小程序

1 创建

https://i-blog.csdnimg.cn/blog_migrate/b5da9279229a25724d7c4b09f15f11ee.png#pic_center

2 创建成功

https://i-blog.csdnimg.cn/blog_migrate/8655164503b18ad475e9808dc1336b65.png#pic_center

3 开发

https://i-blog.csdnimg.cn/blog_migrate/e9bfefa056082587ec495416d625caac.png#pic_center

项目结构

https://i-blog.csdnimg.cn/blog_migrate/fcfcd4337a10cf6c0f1d16849505d782.png#pic_center

与vue对比
序号差异vue框架微信小程序
1样式style标签.wxss文件
2行为script标签.js文件
< wxs >标签
3结构template标签.wxml文件
4盒子divview
5文本spantext
6属性绑定<span :title='lay'></span><text title='{ {msg}}'></text>
7流程分支v-forwx:for
8判断v-if()=''/v-elsewx:if='{ {}}'/wx:else
9显示隐藏v-show=''hidden='{ {}}'
10生命周期8种应用3种+页面5种+组件6种
11编程式路由v-show=''hidden='{ {}}'
12组件式路由<router-link to='地址'></router-link><navigator url="地址"></navigator>
13路由参数<router-link to='地址?id=1'></router-link><navigator url="地址?id=1"></navigator>
14网络请求axioswx.request()
15绑定事件@clickbindtop=''
16双向绑定v-model=''bindinput=''
17获取data数据this.msgthis.data.msg
18设置data数据this.msg=''this.setdata({msg:''})
19创建方法methods:{test(){}}与data同级直接创建

4 基本创建结构

创建

  • app.js中新增一个页面(全局配置) ,会自动创建

  • 默认打开第一个位置的页面

    https://i-blog.csdnimg.cn/blog_migrate/54d619bc2a75745e1c48046391c318d3.png#pic_center

  • 页面的结构

    https://i-blog.csdnimg.cn/blog_migrate/5eb1604af03d061e619d5dc07860731c.png#pic_center

5 基本使用

  • 插值表达式(小胡子语法)的使用
  • 属性绑定
  • 事件使用
  • 流程语句
  • 循环语句
  • 显示隐藏语句
  • 属性的设置和获取
  • 路由的使用
  • tabbar的使用
  • 请求的使用和封装
  • 生命周期的使用

1 插值表达式

https://i-blog.csdnimg.cn/blog_migrate/155c1969acbd90b79570a8d2f526e494.png#pic_center

2 属性绑定

https://i-blog.csdnimg.cn/blog_migrate/511922124b252800109cb412ea85394b.png#pic_center

3 事件使用

  • 与vue中事件基本相同,没有参数时默认是event

点击事件

https://i-blog.csdnimg.cn/blog_migrate/45026e3a8e17bcb487db48f9276d2eee.png#pic_center

输入框事件

  • 输入框默认边框为白色,需要自己设置home.wxss

    https://i-blog.csdnimg.cn/blog_migrate/bc3812066c1bbfaef6aacce4142cf2a8.png#pic_center

4 流程语句

  • wx:if

  • wx:else

    https://i-blog.csdnimg.cn/blog_migrate/25229e570c0ef8e5c341ac48487d4244.png#pic_center

5 显示和隐藏

https://i-blog.csdnimg.cn/blog_migrate/f1c287b9ba4aadf32c9dea3814fa36e0.png#pic_center

6 循环语句

  • wx:for

  • wx:for-index

  • wx:for-item

  • wx:key

    https://i-blog.csdnimg.cn/blog_migrate/c1af8793b701d812d329982396e0e7b9.png#pic_center

7 属性设置和获取

  • 设置:this.setData()

  • 获取属性:this.data.flag

    https://i-blog.csdnimg.cn/blog_migrate/0a5c213212b59e46462bb022d681e3f0.png#pic_center

8 tabbar使用

  • 可参考官网的API文档设置tabber

    https://i-blog.csdnimg.cn/blog_migrate/23e7d105283e6d26647ef485d20ca139.png#pic_center

  • 代码

  "tabBar": {
    "color": "#dddddd",
    "selectedColor": "#16f2e7",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "主页",
        "iconPath": "tabs/home.png",
        "selectedIconPath": "tabs/home-active.png"
      },
      {
        "pagePath": "pages/index/index",
        "text": "消息",
        "iconPath": "tabs/message.png",
        "selectedIconPath": "tabs/message-active.png"
      }
    ]
  },

9 路由的使用

组件式路由

  • 使用navigater
1 可返回

https://i-blog.csdnimg.cn/blog_migrate/a23e81822a90ef13f051e08cb4049da7.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/e14620e87f6116947b4b8dd8715b3ec0.png#pic_center

2 不能返回

https://i-blog.csdnimg.cn/blog_migrate/0c4fca7c1ec7ca170480864533db5003.png#pic_center

3 路由传参

https://i-blog.csdnimg.cn/blog_migrate/87ab176dfb1e605f4570d6307a81c576.png#pic_center

编程式路由

  • 只能跳转非tabbar 有返回 wx.navigateTo({url: '/pages/test/test'})

  • 只能跳转非tabbar 无返回 wx.redirectTo({url: '/pages/test/test'})

  • 能跳转所有页面 无返回 关闭当前页面 wx.switchTab({url: '/pages/index/index'})

  • 能跳转所有页面 无返回 关闭所有页面 wx.reLaunch({url: '/pages/index/index'})

    https://i-blog.csdnimg.cn/blog_migrate/961e8e215205306c08cb5165d3d38adc.png#pic_center

  • 传参

    https://i-blog.csdnimg.cn/blog_migrate/4604a35f1de5c2c66b0b0aa5597beac4.png#pic_center

10 请求的使用

  • wx:request
  • 无跨域问题

请求成功时

https://i-blog.csdnimg.cn/blog_migrate/cce86bbbc0e7d7a60ee50238ad328ed9.png#pic_center

请求失败时

https://i-blog.csdnimg.cn/blog_migrate/876bd3ef189ac5edc911ffb25fd560ba.png#pic_center

11 请求的三种封装

  • 封装属于工具类,存放到utils文件夹下

1 简单式封装

  • base.js
const baseUrl='http://jsonplaceholder.typicode.com/'
module.exports=(url,data,method)=>{
   return new Promise((resolve,reject)=>{
     wx.showLoading({
       title: 'loading',
       mask: true,
       success: (res) => {},
       fail: (res) => {},
       complete: (res) => {
         wx.hideLoading()
       },
     })
     wx.request({
       url: baseUrl+url,
       data: data,
       method,
       success:resolve,
       fail:reject,
       complete: (res) => {},
     })
   })
}

https://i-blog.csdnimg.cn/blog_migrate/ed692e4486a775d0b27c7da2ee358cad.png#pic_center

2 完全式封装

  • 有加载的效果

  const app = getApp()
  const request = (url, options) => {
     // 请求之前提示加载中
    wx.showLoading({title: '加载中...'})
    return new Promise((resolve, reject) => {
      wx.request({
        url: `${app.globalData.baseURL}${url}`,
        // url: host + url,
        method: options.method,
        data: options.method === 'GET' ? options.data : JSON.stringify(options.data),
        header: {
          'Content-Type': 'application/json; charset=UTF-8',
          'x-token': 'x-token'  // 看自己是否需要
        },
        success: resolve,
        fail: reject,
        // success(request) {
        //   // console.log(request)
        //   if (request.statusCode === 200) {
        //     resolve(request.data)
        //   } else {
        //     reject(request.data)
        //   }
        // },
        // fail(error) {
        //   reject(error.data)
        // }
        complete() {
        	wx.hideLoading()
      	}
      })
    })
  }

const get = (url, options = {}) => {
return request(url, { method: 'GET', data: options })
}

const post = (url, options) => {
return request(url, { method: 'POST', data: options })
}

const put = (url, options) => {
return request(url, { method: 'PUT', data: options })
}

// 不能声明 DELETE(关键字)
const remove = (url, options) => {
return request(url, { method: 'DELETE', data: options })
}

module.exports = {
get,
post,
put,
remove
}

https://i-blog.csdnimg.cn/blog_migrate/7b349e9bb2ebb02c8cdc6a27266f482d.png#pic_center

3 外部式封装

  • 第一步:在 pages 安装 flyio npm i flyio -S
  • 第二步:将 node_modules/flyio 复制到项目工程目录下
  • 第三步:严格按照前两步操作否则出现模块找不到错误
  • 封装文件如下:
import Fly from '../flyio/dist/npm/wx'
const fly = new Fly()
const host = 'http://jsonplaceholder.typicode.com/'
// 添加请求拦截器
fly.interceptors.request.use(
(request) => {
wx.showLoading({
title: '加载中',
mask: true
})
console.log(request)
// request.headers["X-Tag"] = "flyio";
// request.headers['content-type']= 'application/json';
request.headers = {
'X-Tag': 'flyio',
'content-type': 'application/json'
}
let authParams = {
// 公共参数
'categoryType': 'SaleGoodsType@sim',
'streamNo': 'wxapp153570682909641893',
'reqSource': 'MALL_H5',
'appid': 'string',
'timestamp': new Date().getTime(),
'sign': 'string'
}

    request.body && Object.keys(request.body).forEach((val) => {
      if (request.body[val] === '') {
        delete request.body[val]
      };
    })
    request.body = {
      ...request.body,
      ...authParams
    }
    return request

})

// 添加响应拦截器
fly.interceptors.response.use((response) => {
wx.hideLoading()
return response.data// 请求成功之后将返回值返回
},
(err) => {
// 请求出错,根据返回状态码判断出错原因
console.log(err)
wx.hideLoading()
if (err) {
return '请求失败'
};
}
)

fly.config.baseURL = host

export default fly
常规写法

https://i-blog.csdnimg.cn/blog_migrate/1c07c2adbc250156a8a21c1b46cdd674.png#pic_center

ES7 写法

https://i-blog.csdnimg.cn/blog_migrate/b9c1573036cc9967d75accaf959c5cf4.png#pic_center

11 wxs 使用

  • 类似< script >标签
  • 使用较少
  • 缺点:
    • 不易操作

    • 不能在里面写注释

    • 语法过于严谨

      https://i-blog.csdnimg.cn/blog_migrate/f23524b996dace633794ba86208087f0.png#pic_center

12 组件的抽离

https://i-blog.csdnimg.cn/blog_migrate/f033029fc202db88595a69657fc76c56.png#pic_center

11 生命周期

  • 参考链接下篇

总结

参考

  • 码云地址: