背景
最近公司有个项目体量比较小，需要使用原生小程序进行开发，因为之前都是使用uni-app开发的，所以抽出半天时间熟悉下微信小程序开发流程以及一些基础语法。
一、注册
首先是注册的账号，请先进入微信公众平台首页，点击 “立即注册” 按钮进行注册，我们选择 “小程序” 即可。注册完成之后进入到开发管理拿到appid
image.png
二、微信开发者工具
下载微信web开发者工具，根据自己的操作系统下载对应的安装包进行安装即可。
1.创建项目
选择小程序，取消云开发选项，填写刚才注册的小程序平台里的appid
image.png
三、目录结构
image.png
四、基本语法
1.文本渲染
<!--pages/demo/index.wxml-->
<view>{{text}}</view>
// pages/demo/index.js
Page({
data: {
text: 'demo测试页面'
},
})
2.条件渲染
<!--pages/demo/index.wxml-->
<view>
<view wx:if="{{handleIf}}">条件渲染true</view>
<view wx:elif="{{!handleIf}}">条件渲染false</view>
</view>
// pages/demo/index.js
Page({
data: {
handleIf: true
},
})
3.循环列表渲染
<!--pages/demo/index.wxml-->
<view>
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
</view>
// pages/demo/index.js
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
},
})
4.事件绑定（传参）
<!--pages/demo/index.wxml-->
<view>
<button bindtap="triggers" data-valueType="123">点击我</button>
</view>
// pages/demo/index.js
Page({
triggers(e){
console.log(e.currentTarget.dataset.valuetype);
}
})
5.路由跳转（传参）
<!--pages/demo/index.wxml-->
<button bind:tap="tapStringParameter">路由跳转传递字符串参数</button>
<button bind:tap="tapObjectParameter">路由传递对象参数</button>
// pages/demo/index.js
Page({
tapStringParameter(){
console.log("tapStringParameter")
wx.navigateTo({
url: '/pages/test/index?name=Tim&sex=男'
})
},
tapObjectParameter(){
console.log("tapObjectParameter")
let person = {
name: '张三',
sex: '男'
}
wx.navigateTo({
url: '/pages/test/index?name=Tim&sex=男',
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', person)
}
})
}
})
6.本地存储
<!--pages/demo/index.wxml-->
<view>
<button bind:tap="handlesSetStorage">设置本地存储数据</button>
</view>
// pages/demo/index.js
Page({
handlesSetStorage() {
// 设置缓存数据
wx.setStorage({
key: 'userInfo1',
data: { name: 'Tom', age: 20 },
success: function () {
console.log('设置缓存数据成功');
}
});
// 获取缓存数据
wx.getStorage({
key: 'userInfo1',
success: function (res) {
console.log(res.data);
}
});
// 设置本地存储数据-同步
wx.setStorageSync('userInfo2', { name: 'Tom', age: 20 });
// 获取本地存储数据-同步
var userInfo = wx.getStorageSync('userInfo2');
console.log(userInfo);
}
})
五、过滤器&&插槽
微信原生小程序中没有像 Vue.js 那样的内置过滤器（Filter）功能，但可以通过以下两种方式实现类似效果：
1.使用 WXS（WeiXin Script）
WXS 是小程序的一套脚本语言，可以在 WXML 模板中直接处理数据，类似过滤器的作用。
<!-- 定义 WXS 脚本 -->
<wxs module="filters">
function formatPrice(price) {
return '¥' + price.toFixed(2);
}
module.exports = {
formatPrice: formatPrice
}
</wxs>
<!-- 在模板中使用 -->
<view>{{ filters.formatPrice(100) }}</view>
2.或通过外部文件引入：
1.创建全局filter文件夹里面写入对应format.wxs处理文件
image.png
2.调用
<!--pages/demo/index.wxml-->
<wxs src="../../filters/format.wxs" module="filters" />
<view>
<view>{{ filters.formatPrice(2000) }}</view>
</view>
六组件封装调用（插槽使用）
1. 创建组件
在对应目录下创建 Components 文件夹，用来存放我们的自定义组件。
image.png
2.注册
//app.json
"usingComponents": {
"head": "components/head/index"
},
3.调用
<view>
<head title-value="{{title}}"></head>
</view>
4.事件调用
- 子组件定义事件传递
<view class="head" style="padding-top: {{paddingTopNum}}px;">
<text bindtap="handleTap">{{titleValue}}</text>
</view>
// components/head/index.js
Component({
methods:{
handleTap() {
// 定义要传递的数据
console.log(999)
let value = "ChildValue"
// 触发绑定事件, myevent为绑定的事件名
this.triggerEvent('myevent', value)
},
},
})
- 父组件接收调用
<view>
<head title-value="{{title}}" bindmyevent="myevent"></head>
</view>
// pages/demo/index.js
Page({
myevent(e) {
// 这里通过 e 就可以接收子组件传过来的内容了
console.log(e.detail)
}
})
5.插槽使用
- slot的使用
子组件wxml
<view class="head" style="padding-top: {{paddingTopNum}}px;">
<slot></slot>
<text bindtap="handleTap">{{titleValue}}</text>
</view>
父组件wxml
<view>
<head title-value="{{title}}" bindmyevent="myevent">返回</head>
</view>
- 组件 wxml 的 slot，多个插槽使用(具名插槽)
在组件的 wxml 中可以包含 slot 节点，用于承载组件使用者提供的 wxml 结构。
默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用。
子组件wxml
<view class="head" style="padding-top: {{paddingTopNum}}px;">
<slot name="before"></slot>
<text bindtap="handleTap">{{titleValue}}</text>
<slot name="after"></slot>
</view>
子组件设置
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
}
})
父组件wxml
<head title-value="{{title}}" bindmyevent="myevent">
<view slot="before">
<text>before</text>
</view>
<view slot="after">
<text>after</text>
</view>
</head>
七、图标使用-iconfont引入
- 去iconfont官网挑选自己的图标到项目
-
项目设置勾选base64
image.png -
在项目中创建static文件夹并创建iconfont.wxss把从iconfont官网下载的图标css粘贴进来
image.png - 在app.wxss中进行引入
/**app.wxss**/
@import "./static/iconfont/iconfont.wxss";
- 使用
<text class="iconfont icon-zhuye" />
八、tabbar配置
//app.json 官方的tabbar配置只支持图片如果想使用图标可以自定义tabbar
"tabBar": {
"selectedColor": "#7626C9",
"list": [
{
"current": 0,
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/static/image/home.png",
"selectedIconPath": "/static/image/homeActive.png"
},
{
"current": 1,
"pagePath": "pages/demo/index",
"text": "我的",
"iconPath": "/static/image/me.png",
"selectedIconPath": "/static/image/meActive.png"
}
]
},
九、封装小程序请求
- 封装 wx.request 请求传递需要的参数( url , data , method , success 成功回调 ， fail 失败回调 ) , 封装常用方法 POST , GET , DELETE , PUT .... 最后导出这些方法
- 然后新建一个 api.js 文件，导入封装好的方法，然后调取相应的方法，传递数据。
在utils目录中新建request.js
const app = getApp(); //获取小程序全局唯一app实例
const host = '******************'; //接口地址
//POST请求
function post(url, data, success,fail) {
request(url, postData, "POST", doSuccess, doFail);
}
//GET请求
function get(url, data, success, fail) {
request(url, postData, "GET", doSuccess, doFail);
}
function request(url, data, method, success, fail) {
wx.showLoading({
title: "正在加载中...",
})
wx.request({
url: host + url, //请求地址
method: method, //请求方法
header: { //请求头
"Content-Type": "application/json;charset=UTF-8"
},
data: data, //请求参数
dataType: 'json', //返回数据格式
responseType: 'text', //响应的数据类型
success: function(res) {
wx.hideLoading();
//成功执行方法，参数值为res.data,直接将返回的数据传入
success(res.data);
},
fail: function() {
//失败执行方法
fail();
},
})
}
module.exports = {
postRequest: post,
getRequest: get,
}
- 在组件中使用
const http = require('../../utils/request.js'); //相对路径
const params = {//请求参数
id:this.data.userId
}
http.postRequest("user/delUser", params, function(res) {
console.log("修改成功！");
}, function(res) {
console.log("修改失败！！！")
})
