微信小程序原生开发记录

遇到类似 ref 交互的情况所需写法

// wxml<wux-calendar id="wux-calendar" />
// js
Page({data: {},onLoad(){let WUXCalendar = this.selectComponent('#wux-calendar')console.log(WUXCalendar,'WUXCalendar');WUXCalendar.touchMove = true},
})
// json
{"navigationStyle": "default","navigationBarTitleText": "预约","usingComponents": {"wux-cell-group": "/miniprogram_npm/wux-weapp/cell-group/index","wux-cell": "/miniprogram_npm/wux-weapp/cell/index","wux-calendar": "/miniprogram_npm/wux-weapp/calendar/index"}
}

引用 npm 包

npm init 初始化一下npm

下载 npm 包。例如： npm i wux-weapp -S --production
project.config.json 文件里修改配置
{"setting": {"packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./"}]}
}
微信开发者工具点击：工具 => 构建 npm => 构建成功 => 多出的文件
引用 npm 包插件方式
页面的 json文件
{"navigationStyle": "default","usingComponents": {"wux-cell-group": "/miniprogram_npm/wux-weapp/cell-group/index","wux-cell": "/miniprogram_npm/wux-weapp/cell/index","wux-calendar": "/miniprogram_npm/wux-weapp/calendar/index"}
}
页面的 wxml 文件
<wux-calendar id="wux-calendar" />
页面的 js 文件
Page({data: {},onLoad(){let WUXCalendar = this.selectComponent('#wux-calendar')console.log(WUXCalendar,'WUXCalendar'); // 可获取组件方法WUXCalendar.touchMove = true},
})
引用 npm 包的样式配置在全局 app.wx
@import './miniprogram_npm/wux-weapp/styles/index.wxss';

微信小程序中navigateTo的跳转以及传递参数

// 跳转
goAbout(e) {wx.navigateTo({url:`/pages/make/about/index?key=value&key2=value2`})
}
// 接收参数
onLoad: function (options) {//此处接收传递过来的参数wx.navigateTo跳转时传递的参数console.log(options.key);console.log(options.key2);//如果要在页面中使用this.setData({id: options.key})
},
//  注意 ：可能是版本区别，有的是这样写的
onLoad(option) {console.log(option.query.id);console.log(option.query.time);
}

wx.navigateBack()函数返回上一页并传参

// 不需要传参
wx.navigateBack()// 需要传参
// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码
// 此处是 A 页面
wx.navigateTo({url: 'B?id=1'
})
// 此处是 B 页面
wx.navigateTo({url: 'C?id=1'
})
// 在 C 页面内 navigateBack，将返回 A 页面
wx.navigateBack({delta: 2
})

Component 组件

监听对象属性的变化 attached 、observer

支持监听对象中单个或多个属性的变化

Component({properties: {type: {type: String,value: '',observer: function (newV) {console.log(newV,'newV');}},},observers: {'some.flag.**': function(flag) {// 使用 setData 设置 this.data.some.flag本身或其下任何子数据字段时触发// （除此以外，使用 setData 设置 this.data.some 也会触发）flag=== this.data.some.flag},},attached: function() {// 这样会触发上面的 observerthis.setData({'some.flag': { /* ... */ }})// 这样也会触发上面的 observerthis.setData({'some.flag.xxx': { /* ... */ }})// 这样还是会触发上面的 observerthis.setData({'some': { /* ... */ }})}
})

组件生命周期

页面loding

// loding 显示
wx.showLoading({ title: '加载中' })
// loding 隐藏
wx.hideLoading()

类似于 v-show 方法 hidden

<view hidden="{{tabsType !== 'project'}}">显示</view>

类似于 v-if 方法 wx:if

<view wx:if="{{isFab}}" catchtap="goToDo" class="make_fab_button make_fab_button_todo"> 新增 </view>

微信小程序原生3种提示弹窗

wx.showToast({title: '操作成功！',  // 标题icon: 'success',   // 图标类型，默认success 图标支持开发文档的iconduration: 1500   // 图标停留时间，默认1500ms
})

wx.showToast({title: '加载中...',//提示的标题icon: 'loading',//iconduration: 1500 //图标停留的时间
})

wx.showToast({title: '未上线',icon: 'none',//iconduration: 1500 //停留时间
})

微信小程序-弹出对话框

wx.showModal({title: '提示',content: '这是一个模态弹窗',success (res) {if (res.confirm) {console.log('用户点击确定')} else if (res.cancel) {console.log('用户点击取消')}}
})

页面首次请求数据 onLoad 和 onShow 的区别

onLoad(e) { // 页面加载数据，从详情页回退本页 不会 再次触发// e 里带有路由 传递的参数},onShow() { // 页面加载数据，从详情页回退本页 会 再次触发let that = thisapp.getUser(function (user) {that.setData({ user });//加载that.loadInfo()});},

路由跳转区别

wx.navigateBack() // 可返回原页面
wx.reLaunch({ url: `/pages/make/index` }) // 关闭所有页面，打开到应用内的某个页面。
wx.switchTab({ url: `/pages/make/index` }) //  可跳转至tabBat页面。
wx.navigateTo({ url: `/pages/make/index` }) //  不能跳转至tabBar页面。
wx.redirectTo() //  关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar

嵌套 H5 页面web-view

小程序端

<web-view src="http://localhost:8000/calendarDom/12&213421412&123123211"></web-view>

微信端 vue3

<template><div v-if="isMini">微信: {{ routerId }}</div><div v-if="!isMini">不是微信: {{routerId}}</div>
</template><script>
import { ref, onMounted, reactive, defineProps, toRefs, watch } from "vue";
import { useRouter } from 'vue-router';
export default {name:'calendarDom'setup() {const props = defineProps({})const $router = useRouter();// 1. 先定义一个空的响应式数据( ref 定义的)// 2 setup中返回定义的数据，需要获取哪个 dom 元素，就在对应元素上使用 ref 属性绑定该数据即可。let data = reactive({routerId:$router.currentRoute.value.params.id, // 获取 微信传参的路由参数isMini: /miniProgram/i.test(navigator.userAgent),// 判断是不是微信环境})return {...toRefs(data),}}
}
</script>
<style>
</style>

vue3 动态路由传参

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
// 引用的两种方法
import callPage from "../view/callPage.vue"; // 方法一//路由数组
const routes = [{path: "/",name: "callPage",component: callPage,children: []},{path: "/calendarDom/:id",name: "calendarDom",component: () => import('../view/calendarDom.vue'), // 方法二children: []}
]//路由对象
const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes //上面的路由数组
})//导出路由对象，在main.js中引用
export default router

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'createApp(App)
.use(router)
.mount('#app')

// App.vue<script setup>
</script><template><router-view></router-view>
</template><style scoped>
</style>

wxml 排版多个空格

decode="{{true}}"

<text decode="{{true}}">空格 &nbsp;&nbsp;&nbsp;&nbsp; 空格 </text>

点击图片放大并进行长按保存

<!-- 点击图片 放大 -->
<image src="{{accessory}}" class='icon100' data-imgUrl="{{accessory}}" bindtap="setLookImage"></image>
<!-- 显示放大图片 并 长按进行保存 -->
<view wx:if="{{!!lookImage}}" class="fellow_lookImage" data-imgUrl="{{''}}" bindtap="setLookImage"><image src="{{lookImage}}" show-menu-by-longpress></image>
</view>

Page({data: {accessory:'',lookImage:'',},setLookImage(e){const lookImage = e.currentTarget.dataset.imgurlthis.setData({ lookImage })}
})

上传图片 wx.chooseImage

一、使用APIwx.chooseImage(OBJECT)

wx.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

OBJECT参数说明：

参数	类型	必填	说明
count	Number	否	最多可以选择的图片张数，默认9
sizeType	StringArray	否	original 原图，compressed 压缩图，默认二者都有
sourceType	StringArray	否	album 从相册选图，camera 使用相机，默认二者都有
success	Function	是	成功则返回图片的本地文件路径列表 tempFilePaths
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

注：文件的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用 wx.saveFile，在小程序下次启动时才能访问得到。

success返回参数说明：

参数	类型	说明	最低版本
tempFilePaths	StringArray	图片的本地文件路径列表
tempFiles	ObjectArray	图片的本地文件列表，每一项是一个 File 对象	1.2.0

File 对象结构如下:

字段	类型	说明
path	String	本地文件路径
size	Number	本地文件大小，单位：B

var util = require('../../utils/util.js')
Page({data:{src:"../image/pic4.jpg"},gotoShow: function(){var _this = thiswx.chooseImage({count: 9, // 最多可以选择的图片张数，默认9sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有success: function(res){// successconsole.log(res)_this.setData({src:res.tempFilePaths})},fail: function() {// fail},complete: function() {// complete}})}

二、图片路径进行数据绑定

<view class="container"><view><button type="default" bindtap="gotoShow" >点击上传照片</button> </view><view><image class= "show-image" mode="aspectFitf" src="{{src}}"></image></view>
</view>

1、wx.chooseImage 调用相机或相册

2、<image class= "show-image" mode="aspectFitf" src="{{src}}"></image> 数据绑定

3、js中动态修改文件路径

var _this = this
wx.chooseImage({count: 9, // 最多可以选择的图片张数，默认9sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有success: function(res){// successconsole.log(res)_this.setData({src:res.tempFilePaths})},fail: function() {// fail},complete: function() {// complete}

picker 带有搜索过滤组件 && 键盘弹起覆盖问题解决

子组件

由于 picker-view 的 bindchange 获取值会有延迟情况所以借用了 bindpickstart & bindpickend 事件结合使用防止获取选中值不一致问题

// index.js
Component({options: {// 在组件定义时的选项中启用多slot支持multipleSlots: true},/*** 组件的属性列表*/properties: {id:{type: String,value: 'demopicker'},// 初始化 initValue: {type: String,value: ''},// 父组件传递过来的数据列表items: {type: Array,value: []}},/*** 组件的初始数据*/data: {//控制picker的显示与隐藏flag: true,// 用户输入的关键词searchValue:'',// 滚动选择的setValues: [],// 滚动选择的索引selectSchoolIndex:'',itemsList:[],show:true},/*** 组件的方法列表*/methods: {/*** @name: 搜索* @author: camellia* @date: 20211129*/bindKeyInput(e){let self = this;const val = e.detail.valueconst list = self.data.items.filter(fv => fv.realname.includes(val) && fv )this.setData({ itemsList: [...list] })// self.triggerEvent('searchSchool', e.detail.value);},/*** @name: 隐藏picker* @author: camellia* @date: 20211129*/hiddeDatePicker(){let self = this;self.setData({ flag: !self.data.flag, searchValue:'' })},/*** @name: 展示picker* @author: camellia* @date: 20211129*/showDatePicker(){let self = this;self.setData({flag: !self.data.flag})self.getItems()},/*** @name: 选择好后，点击确定* @author: camellia* @date: 20211129*/confirm(){let self = this;// 获取用户选择的let item = self.data.itemsList[self.data.selectSchoolIndex] ? self.data.itemsList[self.data.selectSchoolIndex] : self.data.itemsList[0];// 通过发送自定义事件把用户选择的传递到父组件console.log(item,'item');self.triggerEvent('confirm', item);self.setData({ flag: !self.data.flag, searchValue:'' })},/*** @name: 用户滚动picker时，获取滚动选择的索引* @author: camellia* @date: 20211129*/bindChange(e){let self = this;self.setData({// 用户选择的索引selectSchoolIndex:e.detail.value[0]})},bindpickstart(){ // 滚动选择开始this.setData({show: false})},bindpickend(){ // 滚动选择结束setTimeout(()=>{this.setData({show: true})},500)},/*** @name: 获取初始化信息* @author: camellia* @date: 20211130*/getItems(e){let self = this;this.setData({ itemsList: [...self.data.items] })if (self.data.itemsList.length && self.data.initValue) {let itemsList = self.data.itemsListfor (let i = 0; i < itemsList.length; i++) {if (self.data.initValue == itemsList[i].id) {self.setData({ setValues: [i] })return}}}self.setData({ setValues: [0] })},
},
})

<view class="date-background" hidden="{{flag}}"  id="{{demopicker}}"><view class='date-gray-background' bindtap='hiddeDatePicker'></view><view class='date-container'><view class="transparent"><view class='date-confirm'><view bindtap='hiddeDatePicker' class="quxiao font-size-text">取消</view><!-- cursor-spacing="350" 键盘弹框弹起 避免选项被键盘遮挡 --><input class="search-input" cursor-spacing="350" maxlength="10" value="{{searchValue}}" bindinput="bindKeyInput" placeholder="输入筛选" placeholder-class="placeholderStyle"/><view hidden="{{show}}" class="quxiao font-size-text">确定</view><view hidden="{{!show}}" bindtap='confirm' class="queding font-size-text">确定</view></view><picker-viewwx:if="{{itemsList.length}}"indicator-class="indicator"value="{{setValues}}"bindchange="bindChange"bindpickstart="bindpickstart"bindpickend="bindpickend"indicator-style="height: 100rpx;"mask-style="height:700rpx;"style="width: 100%; height: 85%;position:absolute;bottom:0rpx;text-align:center;background:white"><picker-view-column class="pickViewColumn"><view wx:for="{{itemsList}}" wx:key="id" style="line-height: 104rpx">{{item.realname}}</view></picker-view-column></picker-view><view wx:if="{{!itemsList.length}}"indicator-style="height: 100rpx;"mask-style="height:700rpx;"style="width: 100%; height: 86%;position:absolute;bottom:0rpx;text-align:center;background:white;box-sizing: border-box;padding-top: 20rpx;">暂无匹配数据</view></view></view>
</view>

.date-background {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 9999;
}
.date-gray-background {position: fixed;width: 100%;top: 0;background: rgba(0, 0, 0, .5);height: calc(100% - 500rpx);z-index: 9999;
}
.date-container {position: fixed;width: 100%;height: 600rpx;overflow: hidden;background: #fff;bottom:0;z-index: 9999;
}.date-confirm {display: flex;justify-content: space-between;height: 80rpx;align-items: center;padding:0 20rpx;border-bottom:2rpx solid #eee;
}
.pickViewColumn{height: 700rpx;
}
.indicator{height: 80rpx;border: 1rpx solid #E5E8E8;
}
.font-size-text{font-size: 32rpx;
}
.quxiao{color: rgb(146, 141, 141);
}
.queding{color: #12A4Fa;
}
.placeholderStyle{font-size: 28rpx;background-color: #eee;padding-left: 8rpx;
}
.search-input{width: 70%;height: 56rpx;
}

{"component": true,"usingComponents": {}
}

父组件

{"usingComponents": {"MySeachPicker":"/components/MySeachPicker"}
}

<view ><view ><view >下拉选择</view><view ><button bindtap="showSchoolPicker">点击</button></view></view><MySeachPicker id="demopicker" initValue="{{siteconsultantInfo.id || ''}}" items="{{creatorList}}" bindconfirm="confirm"/></view>

Page({data: {statusList:[],//状态},onLoad() {let self = this;// 获取自定义 picker实例self.demopicker = self.selectComponent("#demopicker");console.log(self.demopicker,'self.demopicker');},onShow() { },confirmSchool(){let self = this;// 隐藏自定义pickerself.demopicker.hiddeDatePicker();},confirm(e){console.log(e.detail,'e隐藏自定义picker');},showSchoolPicker(){let self = this;console.log(self.demopicker,'self.demopicker');self.demopicker.showDatePicker()},
})

input 带有手机键盘搜索触发

<input class='search_input' type='text' confirm-type='search' bindconfirm='toSearch' ></input>
//js部分
toSearch(e){console.log(e.detail.value) //e.detail.value 为input框输入的值
}

局部视口滚动到底部触发事件

<view class="followUp-list"><scroll-view bindscrolltolower="touchBottom" enhanced="{true}" scroll-y="{true}" scroll-with-animation="{true}"  lower-threshold='50'><view class="followUp-list-item" wx:for="{{followUpList}}"><view class="text-center followUp-flex2"  data-item="{{item}}" bindtap="gotoDelit">{{item.account_name}}</view><view class="text-left followUp-flex2"  data-item="{{item}}" bindtap="gotoDelit">{{item.node_realname}}</view><view class="text-left followUp-flex4 eee-color"  data-item="{{item}}" bindtap="gotoDelit"><view class="text-left"> 状态: {{item.follow_type_title}}</view><view class="text-left"> 时间: {{item.follow_time}}</view><view class="text-left">{{item.explain}}</view></view><view class="text-center followUp-flex2" data-item="{{item}}" bindtap="taskChangeStatus">{{item.status_title}}</view></view></scroll-view>
</view>touchBottom(){console.log(123);
},.followUp-list{scroll-view {width: 100%;height: 380rpx;}
}

自适应页面设置滚动高度


<view class="InitialRecord_details"><scroll-view bindscrolltolower="touchBottom" style="height: {{scrollViewHeight}}px;" enhanced="{true}" scroll-y="{true}" scroll-with-animation="{true}" lower-threshold='50'><view wx:for="{{lookList}}" class="InitialRecord_details_list"><view> 2023年1月1日 </view></view>    <view wx:if="{{lookList.length <= 0}}" class="zanwu_list">暂无数据</view></scroll-view><button id="id_v_search" class="InitialRecord_details_back_btn" bindtap="btnBack">返回</button>
</view>// pages/customer/InitialRecord/details/index.js
import { Ajax } from '../../../../utils/ajax.js';
Page({/*** 页面的初始数据*/data: {lookList: [],page: 1,pageSize: 3,customer_id: 0,windowHeight: 0,scrollViewHeight: 0,},/*** 生命周期函数--监听页面加载*/onLoad(options) {const { customer_id = 0 } = optionsthis.setData({ customer_id })this.getData()const that = thiswx.getSystemInfo({success: function(res) {that.setData({ windowHeight: res.windowHeight });}});let query = wx.createSelectorQuery().in(this);// 然后逐个取出节点信息// 选择器的语法与jQuery语法相同query.select('#id_v_search').boundingClientRect();// 执行上面所指定的请求，结果会按照顺序存放于一个数组中，在callback的第一个参数中返回query.exec((res) => {// 取出 搜索框布局 的高度let reduceHeight = res[0].height;// 然后就是做个减法let scrollViewHeight = that.data.windowHeight - reduceHeight;// 算出来之后存到data对象里面that.setData({ scrollViewHeight });console.log(scrollViewHeight,'scrollViewHeight');});},btnBack() {wx.navigateBack()},// 获取列表数据getData() {wx.showLoading({title: '加载中...',})const { page = 1, pageSize = 20, customer_id = 0, lookList = [] } = this.dataconst params = { page, pageSize, customer_id }Ajax('/follow/data', { ...params }, 'GET').then(res => {console.log(res, 'follow/data')const { status, data = {list: []}, paginator = {currentPage: 1, total: 0} } = reslet newData = data.listconst {currentPage= 1, total= 0} = paginatorif (lookList.length < total) {// 处理 下拉加载分页 数据newData = [...lookList, data]}if (status) {this.setData({ // 处理 下拉加载分页page: lookList.length < total ? + this.data.page + 1 : currentPage,lookList: newData })}wx.hideLoading()}).catch(() => wx.hideLoading())},touchBottom() { // 处理 下拉触发 分页请求this.getData()},
}).InitialRecord_details{width: 100%;height: 100%;flex: 1;overflow: hidden;scroll-view {width: 100%;padding: 10rpx 20rpx;box-sizing: border-box;.InitialRecord_details_list{width: 100%;margin: 10rpx auto;border: 1px solid #ccc;box-sizing: border-box;padding: 10rpx;}}.zanwu_list{width: 100%;text-align: center;padding-top: 50rpx;}.InitialRecord_details_back_btn{width: 100%;background-color: #81D3F8;color: #fff;}
}

父组件改变子组件样式

// 组件 jsComponent({externalClasses: ['class-active]});// 组件 wxml<view class="son-dom class-active"></view>// 父页面 wxml<sondom class-active='make_matters_no_content'/>// class名不能使用驼峰，否则不生效 // 如果要重写子组件中的属性，需要 !important.make_matters_no_content{background: red!important;}

微信小程序中跳转另一个小程序

// 一wx.navigateToMiniProgram({appId: 'wx111a111111a1aa11',  //appidpath: '/pages/view/index',//pathextraData: { }, // 参数envVersion: 'develop', // 开发版 develop、体验版 trial、正式版 release  success(res) {// 打开成功console.log('成功')}
})
// 二
<navigator target="miniProgram" open-type="navigate" app-id="" path="" version="release">
</navigator>

微信小程序原生开发记录相关推荐

【微信小程序-原生开发】实用教程08 - 开通微信云开发，操作云数据库新增数据（含修改数据权限），初始化云服务（含获取微信云环境 id），获取云数据，滚动公告栏
开始前,请先完成圆梦宝典中宫格导航的开发,详见 [微信小程序-原生开发]实用教程 07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字) https://blog.csdn.net ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）
可在系列教程的基础上继续开发,也可以单独使用 [微信小程序-原生开发]系列教程效果预览代码实现点击触发生成海报在活动详情页,指定点击某图标/按钮,触发跳转到生成海报的页面 pages\comp ...
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内使用scroll-view实现滚动内容（包括图片）
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内可以滚动内容(包括图片) 效果图这里的遮罩层内容由两张图片构成底图+内部内容实现代码 wxml 使用云开发的存储,自己开发的时候换掉src即可 ...
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...
微信小程序原生开发集成IM服务出现无法找到模块“tim-wx-sdk”的声明文件问题解决
微信小程序原生开发集成IM服务出现无法找到模块"tim-wx-sdk"的声明文件问题解决: 通过npm命令安装配置: 在终端进入到小程序项目根目录执行:npm install 未初 ...
【微信小程序-原生开发】实用教程09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）
开始前,请先完成圆梦宝典中滚动公告栏的开发,详见 [微信小程序-原生开发]实用教程 08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据 ...
【微信小程序-原生开发】实用教程05-首页（含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片）
开始前,请先完成启动/欢迎/首屏广告页的开发,详见 [微信小程序-原生开发]实用教程04-启动/欢迎/首屏广告页(含倒计时.添加文字.rpx.定义变量和函数.读取变量.修改变量.wx.reLaunch ...
【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航
开始前,请先完成项目创建,详见 [微信小程序-原生开发]实用教程01-注册登录账号,获取 AppID.下载安装开发工具.创建项目.上传体验前期准备因我们的项目是根据模板创建的,需先清理掉无效的页面 ...

微信小程序原生开发记录

遇到类似 ref 交互的情况所需写法

引用 npm 包

微信小程序中navigateTo的跳转以及传递参数

wx.navigateBack()函数返回上一页并传参

Component 组件

监听对象属性的变化 attached 、observer

组件生命周期

页面loding

类似于 v-show 方法 hidden

类似于 v-if 方法 wx:if

微信小程序原生3种提示弹窗

微信小程序-弹出对话框

页面首次请求数据 onLoad 和 onShow 的区别

路由跳转区别

嵌套 H5 页面web-view

wxml 排版多个空格

点击图片放大并进行长按保存

上传图片 wx.chooseImage

picker 带有搜索过滤组件 && 键盘弹起覆盖问题解决

input 带有手机键盘搜索触发

局部视口滚动到底部触发事件

自适应页面设置滚动高度

父组件改变子组件样式

微信小程序中跳转另一个小程序

微信小程序原生开发记录相关推荐

最新文章

热门文章

微信小程序原生开发 记录

遇到类似 ref 交互的 情况 所需写法

引用 npm 包

微信小程序中navigateTo的跳转以及传递参数

wx.navigateBack()函数返回上一页并传参

Component 组件

监听对象属性的变化 attached 、observer

组件生命周期

页面loding

类似于 v-show 方法 hidden

类似于 v-if 方法 wx:if

微信小程序原生3种提示弹窗

微信小程序-弹出对话框

页面首次请求数据 onLoad 和 onShow 的区别

路由跳转 区别

嵌套 H5 页面web-view

wxml 排版 多个 空格

点击图片放大 并 进行长按保存

上传图片 wx.chooseImage

picker 带有 搜索 过滤 组件 && 键盘弹起覆盖 问题解决

input 带有 手机键盘搜索触发

局部视口滚动到底部触发事件

自适应页面 设置滚动高度

父组件 改变 子组件 样式

微信小程序中跳转另一个小程序

微信小程序原生开发 记录相关推荐

最新文章

热门文章

微信小程序原生开发记录

遇到类似 ref 交互的情况所需写法

路由跳转区别

wxml 排版多个空格

点击图片放大并进行长按保存

picker 带有搜索过滤组件 && 键盘弹起覆盖问题解决

input 带有手机键盘搜索触发

自适应页面设置滚动高度

父组件改变子组件样式

微信小程序原生开发记录相关推荐