微信小程序开发从创建到使用

最新推荐文章于 2024-05-06 16:00:47 发布

段wl

最新推荐文章于 2024-05-06 16:00:47 发布

阅读量166

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/sdgjah2/article/details/127798910

版权

一、注册微信小程序

网址
下载微信小程序开发工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

注册一个微信小程序
https://mp.weixin.qq.com/wxopen/waregister?action=step1

二、内置组件

1. view组件块组件
2. text 组件行内组件
3. button组件按钮
4. input组件表单

三、微信小程序模板语法

1.文本渲染

{{ msg}}
可以执行简单的js表达式
{{2+3}}
{{msg.length}}

2.条件渲染

wx:if=""
wx:elif=""
wx:else

3.列表渲染

wx:for="{{list}}"
wx:key="index"
{{item}}
{{index}}

4.自定义列表渲染

定义item与index的名称
wx:for="{{list}}}"
wx:for-item="myitem"
wx:for-index="myidx"
{{myidx}}
{{myitem}}

5.导入（不常用）

1.import 只能导入template内容

1）template/utils.wxml

	<template name="userCart">
		用户名：{{name}}
	</temlate>

2）home.wxml

	<import src="/template/utils.wxml">
	<tempate is="userCart" data="{{...u1}}">

2. include 只能导入非template内容

1） template/foot.wxml

	<view>{{内容}}</view>

2） home.wxml

	<include src="/template/foot.wxml">

四、微信小程序事件

1. 常用事件

1） bindtap 点击时候
2） bindconfirm  表单输入确认
3.）bindInput  表单输入时

2. 事件的传参

<button data-msg="xxx" bindtap="tapHd">
获取事件的参数  e.target.dataset.msg

五、表单的绑定

<input value="{{s1}}" bindinput="inputHd">
inputHd(e){
  	 this.setData({s1:e.detail.value})
}
表单的值获取：e.detail.value

六、内置的api

1. showToast显示提示
2. wx.setStorageSync(key,value) 本地存储
3. wx.getStorageSync(key) 本地获取
4. wx.request 网络请求

七、生命周期

1. onLoad 页面加载完毕
2. onPullDownRefresh 下拉刷新
3. onReachBottom 触底更新

八、更新数据与视图

this.setData({k:v})

九、页面配置

"enablePullDownRefresh": true,  允许下拉刷新
"backgroundTextStyle": "dark",  背景文字颜色
"backgroundColor":"#f70", 背景颜色
"usingComponents": {} 组件

十、小程序的限制

1. 源文件大小

每个包不能超过2M
总共不能超过16-20M

2. 页面缓存堆栈5层
3. 底部栏

最少2个最多5个
底部栏图片31k

4. 本地存储

1次1M 最多100M

5. setData

不能超过1M
功能和微信一致（右上角胶囊按钮，下拉刷新。。。）

十一、小程序的页面跳转

1.组件跳转

<navigator url="/pages/xxx/xx">
	url 跳转的地址
	open-type 
打开类型
	navigate 普通跳转
	navigateBack 返回
	redirect 重定向
	switchTab 跳转底部栏
	reLaunch 重启

2. api跳转

wx.navigateTo  跳转
wx.switchTab  切换底部栏
wx.redirect 重定向
wx.reLaunch 重启

十二、页面栈

A页面=>B页面=>C页面=>D页面=>E 页面
通过 open-type = "navigate" 页面会缓存起来  最多缓存5层
A页面->redirect B页面
A页面是不会被缓存
E 页面  "navigateBack" 到 D页面   （页面的缓存移除一次）

总结：navigate会增加一层缓存页面
redirect 会替换一层缓存页面
navigateBack 会移除一层缓存页面

十三、页面传参

小程序页面传参主要通过 查询传参
传：url=“xxxx/xxx?name=mumu&age=18”
接收：onLoad options参数接收
		options.name
		options.age

十三、全局数据

1. app.js的globalData

	定义
	app.js的globalData
	页面使用
	var app  = getApp();
	app.globalData.num

2. 本地存储

十四、封装request.js

为什么需要封装 request

1. 定义baseURL
2. 添加请求头
3. 添加加载提示
4. 同一错误处理

1.初始化项目

在这里插入图片描述

2.安装插件

在这里插入图片描述

3.app.json删v2

在这里插入图片描述

4.修改project.config.js

在这里插入图片描述

5.工具，构建npm

在这里插入图片描述

6.导入组件

在这里插入图片描述

7. 使用组件

在这里插入图片描述

十五、封装完整案例代码

第一次封装 request.js

// 定义服务器代理
// 基础url
const URI = {
 	baseURL:"http://xxxxxx"
}
// 把{name:zhangsan,age:18}转换为name=zhangsan&age=18
function transPrams(obj){
  var str = "";
  for(var k in obj){
    str+=k+"="+obj[k]+"&";
  }
  // 移除最后一个&
  return str.slice(0,-1)
}

function request(option){
  var url = option.url;
  // 请求的地址如果是以gttp开头 直接用url  如果不是开头添加baseURL
  url=url.startsWith("http")?url:URI.baseURL+url;
  // 选项里面有params
  if(option.params){
    // 如果有参数，吧参数转换为url编码形式加入
    url+="?"+transPrams(option.params)
  }
  // 02可以添加请求头
  var  header = option.header||{};
  header.Authorization ="Bearer "+wx.getStorageSync('token')
  // 03添加加载提示
  if(option.loading){
    wx.showToast({
      title: option.loading.title,
      icon:option.loading.icon
    })
  }


  // 返回一个promise
  return new Promise((resolve,rejects)=>{
    wx.request({
      url:url,
      method:option.method||"GET",//请求的方法
      data:option.data,//post传入的参数
      header,
      success(res){ 
        //请求成功
	    resolve(res.data)
   	   },
     fail(err){
       // 03对错误进行对比
        wx.showToast({
         title: '加载失败',
          icon:"none"
        })
        //请求失败
       rejects(err)
      },
      complete(){
        // 关闭加载提示
        wx.hideToast()
      }
    })
  })
}

// 定义get简易方法
request.get = (url,config)=>{
  return request({url,method:"get",...config})
}

// 定义post简易方法
request.post = (url,data,config)=>{
  return request({url,method:"post",data,...config})
}
module.exports={request}

二次封装 api.js

// 导入request
const {request} =require("../utils/request")
// 定义api
// 获取频道与分类
function GetCategory(){
  return request.get("/mi/cats.php")
}
// 获取分类列表
function GetNewsList(data){
  return request.get("/mi/list.php",{params:data})
}
// 获取新闻内容
function GetNewsContent(data){
  return request.get("/mi/content.php",{params:data,
  loading:{
    title:"内容准备中...",
    icon:"loading"
  }})
}
module.exports={
  GetCategory,GetNewsContent,GetNewsList
}