微信小程序开发项目搭建（保姆教程）

之前有写过一版微信小程序语法的文章：https://zhuhukang.blog.csdn.net/article/details/125060123，现在看起来有点乱，因此又重新整合了一下，出了该文章：

一、注册微信小程序

1. 进入 微信公众平台，点击立即注册，==注意：==填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱，而且每个邮箱仅能申请一个小程序。
2. 接着填写账号信息，需要注意的是，填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱，而且每个邮箱仅能申请一个小程序。
3. 激活邮箱之后，选择主体类型为 “个人类型”，并按要求登记主体信息。主体信息提交后不可修改，该主体将成为你使用微信公众平台各项服务和功能的唯一法律主体与缔约主体，在后续开通其他业务功能时不得变更或修改。

二、小程序创建

1. 下载微信开发者工具

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

2. 创建微信小程序

APPID 获取

3. 安装vant

1. 在当前目录下进行npm安装：

# 使用 npm 安装 npm i @vant/weapp-S--production # 或使用 yarn 安装 yarn add @vant/weapp--production

2. 安装完成后，需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置

{..."setting":{..."packNpmManually":true,"packNpmRelationList":[{"packageJsonPath":"./package.json","miniprogramNpmDistDir":"./miniprogram/"}]}}

3. 在项目的app.json或页面的 json文件中注册组件。例如：

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

4. 在 WXML 文件中即可直接使用组件：

<van-button type="primary">按钮</van-button>

4. 构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

5. 使用

三、基本语法

1. wxss

默认单位是rpx 750rpx 等于一个屏幕的宽375就是50%的宽

2. 事件

bindInput 表单输入时 bindconfirm 表单输入确认 bindtap 点击时候

3. 内置组件

view 组件块组件 text 组件行内组件 button 组件按钮 input 组件表单

4. 事件的传参和表单的绑定

<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

5. 生命周期

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

6. 内置的API

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

四、页面切换

1，< navigator></ navigator >标签

这是最常见的一种跳转方式,相当于html里的a标签.但需要注意的是 该方法不能跳转tabbar页面.

格式为:

<navigator url="........"></navigator><navigator url="/pages/event/event">前往event</navigator>

2，wx.navigateTo.

通过构造js函数,在函数中调用该接口可实现页面跳转的效果.但该接口同样不能跳转tabbar页面.跳转后左上角有返回小箭头,点击可返回原本页面.

格式为:

//<!**wxml文件**><viewclass="select_calculator"bindtap="next_calculator">//js文件next_calculator:function(){wx.navigateTo({url:'/pages/calculator/calculator',})

3，wx.redirectTo.

关闭当前页面，跳转到应用内的某个页面(不能跳转tabbar页面)。类似于html中的 window.open(‘…’);
跳转后左上角出现返回小箭头,点击后可返回原本页面.

格式为:

<view><navigator open-type="redirect"url="/pages/event/event">跳转并替换</navigator></view>

4，wx.switchTab.

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面；该方法只能跳转tabbar页面.

post_calculator:function(){wx.switchTab({url:'/pages/calculator/calculator',})},})

5，wx.reLaunch.

关闭所有页面，打开到应用内的某个页面。 跟 wx.redirectTo 一样左上角不会出现返回箭头，但两者却不完全相同；

格式为:

<view><navigator open-type="reLaunch">重启</navigator></view>

6，tabBar 全局配置

注意：

1. tabBar中只能配置最少 2 个、最多 5 个 tab 页签
2. 当渲染顶部 tabBar 时，不显示 icon，只显示文本

① backgroundColor： tabBar 的背景色 ② selectedIconPath： 选中时的图片路径 ③ borderStyle： tabBar 上边框的颜色 ④ iconPath： 未选中时的图片路径 ⑤ selectedColor： tab 上的文字选中时的颜色 ⑥ color： tab 上文字的默认（未选中）颜色

3. 配置 tabBar 选项

{"pages":["pages/hone/hone","pages/Profile/Profile","pages/experience/experience","pages/skill/skill","pages/index/index","pages/logs/logs"],"tabBar":{"color":"#777","selectedColor":"#1cb9ce","list":[{"pagePath":"pages/hone/hone","text":"简历信息","iconPath":"/pages/img/icon08.png","selectedIconPath":"/pages/img/icon08.png"},{"pagePath":"pages/skill/skill","text":"个人技能","iconPath":"/pages/img/icon04.png","selectedIconPath":"/pages/img/icon04.png"},{"pagePath":"pages/experience/experience","text":"项目经历","iconPath":"/pages/img/icon02.png","selectedIconPath":"/pages/img/icon02.png"},{"pagePath":"pages/Profile/Profile","text":"自我评价","iconPath":"/pages/img/icon06.png","selectedIconPath":"/pages/img/icon06.png"}]},"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"Weixin","navigationBarTextStyle":"black"},"style":"v2","sitemapLocation":"sitemap.json"}

五、页面传参

1. 页面传递的参数

<view>页面传递的参数</view><view>姓名：{{name}}，年龄{{age}}</view>

2. wxml

<view><navigator open-type="navigate"url="/pages/event/event?name=mumu&age=18">事件event</navigator></view><view><navigator open-type="redirect"url="/pages/event/event?name=曾庆林&age=33">跳转并替换</navigator></view>

3. js

/** * 页面的初始数据 */data:{num:null,},goEvent(e){// 获取到传递的参数typevartype=e.target.dataset.type;// 如果type值是redirect 替换跳转if(type=="redirect"){wx.redirectTo({url:"/pages/event/event",})}else{// 否则就普通跳转wx.navigateTo({url:'/pages/event/event',})}},/** * 生命周期函数--监听页面加载 */onLoad(options){// 更新导航栏的标题wx.setNavigationBarTitle({title:'导航与跳转',})},/** * 生命周期函数--监听页面显示 */onShow(){this.setData({num:app.globalData.num})},

六、封装 request

• utils/request.js

// 基础的urlconstURI={baseURL:"http://dida100.com"}// {name:"mumu",age:18} => name=mumu&age=18functiontansParams(obj){varstr="";for(varkinobj){str+=k+"="+obj[k]+"&";}//移除最后一个&returnstr.slice(0,-1);}functionrequest(option){varurl=option.url;// 01 可以添加baseURL// 是不是以http开头的，是用url不是加上baseURLurl=url.startsWith("http")?url:URI.baseURL+url;// 选项里面有params（get传入的参数）if(option.params){// 如果有参数，把参数转换为url编码形式加入url+="?"+tansParams(option.params);}// 02 可以添加请求头varheader=option.header||{};header.Authorization="Bearer "+wx.getStorageSync('token');// 03 可以添加加载提示if(option.loading){wx.showToast({title:option.loading.title,icon:option.loading.icon,})}// 返回一个promisereturnnewPromise((resolve,reject)=>{wx.request({// 请求的地址如果一http开头直接用url不是http开头添加我们 baseUrLurl:url,method:option.method||"GET",//请求的方法 默认getdata:option.data,//post出入的参数header,success(res){// 请求成功resolve(res.data);},fail(err){// 04 对错误进行处理wx.showToast({title:"加载失败",icon:"none"})// 请求失败reject(err);},complete(){// 关闭加载提示wx.hideToast();}})})}// 定义get简易方法request.get=(url,config)=>{returnrequest({url,method:"get",...config})}// 定义post简易方法request.post=(url,data,config)=>{returnrequest({url,method:"post",data,...config})}// 导入requestmodule.exports={request}