微信小程序原生开发功能合集_微信小程序 src调用方法

信息获取

1.页面宽高，rpx转px

const height = wx.getSystemInfoSync().windowHeight
const width = wx.getSystemInfoSync().windowWidth
const rpxtopx = width / 750 //rpx转px系数
//示例
const px=10*rpxtppx //10rpx转px
1
2
3
4
5

2.获取globalData

const globalData = app.globalData
1

动态修改配置

1.当前页面的标题

wx.setNavigationBarTitle({
	title: '标题'
})
1
2
3

跳转

1.跳到本程序其他页面，注意不能跳到 tabbar 页面

wx.navigateTo({
	url: '../path/path'
})
1
2
3

2.跳到 tabbar 页面

wx.switchTab({
	url: '../path/path'
})
1
2
3

3.返回键返回至其它页面

//借助onUnload
onUnload() {
	wx.navigateTo({
		url: '../path/path'
	})
},
1
2
3
4
5
6

本地存储

应用场景：

1. 存储后台请求数据（不实时更改的），避免每次打开页面都请求
2. 存储全局共享数据，类似于存储在app.globalData的数据，但是再次打开小程序时不需要重新获取

一条记录

try{
	wx.setStorageSync('key', data)//存储data
 	wx.getStorageSync('key')//获取data
 	wx.removeStorageSync('key')//移除data
}catch(e){
    console.log(e)
}
1
2
3
4
5
6
7

所有记录

try{
	const res = wx.getStorageInfoSync()//所有存储信息
	const keys= res.keys//所有记录key值
	const data=[]
	//获取所有记录至data
	keys.forEach((value,index)=>{
		data.push(wx.getStorageSync(value))
	})
}catch(e){
    console.log(e)
}
1
2
3
4
5
6
7
8
9
10
11

云开发数据库

1.查询所有数据同步函数

//-->util/request.js

//云开发数据库
const db = wx.cloud.database()
// 获取所有数据，table表名，param查询where条件
const getAllData = async (table, param)=>{
    // 先取出集合记录总数
    const countResult = await db.collection(table).where(param).count()
    console.log(countResult)
    const total = countResult.total
    // 计算需分几次取
    const batchTimes = Math.ceil(total / 20)
    // 承载所有读操作的 promise 的数组
    const tasks = []
    for (let i = 0; i < batchTimes; i++) {
        const promise = db.collection(table).where(param).skip(i * 20).limit(20).get()
        tasks.push(promise)
    }
    // 等待所有
    return (await Promise.all(tasks)).reduce((acc, cur) => {
        return {
            total: total, //总数
            data: acc.data.concat(cur.data), //所有数据
            errMsg: acc.errMsg
        }
    })
}

module.exports = {
    getAllData
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

页面显示

1.用户头像和昵称——不需要授权

<view class="userinfo">
	<open-data type="userAvatarUrl" class="userinfo-avatar"></open-data>
	<open-data type="userNickName" class="userinfo-nickname"></open-data>
</view>
1
2
3
4

2.显示本地图片

在miniprogram文件夹下，也即pages同级建立resource目录

<image src="/resource/icon_test2.png" mode="scaleToFill"></image>
1

3.滚动区域

一定要设置具体的高度，可借助页面高度wx.getSystemInfoSync().windowHeight具体计算

<scroll-view class=".text" scroll-y="true"  style="height:{{scrollheight}};"></scroll-view>
1

4.自定义radio样式——修改radio样式

<radio-group class="ans" bindchange="changeValue">
    <view class="radio left">
        <radio checked="{{current.a===a}}" value="{{current.a}}"></radio>
    </view>
    <view class="radio right">
        <radio checked="{{current.b===b}}" value="{{current.b}}"></radio>
    </view>
</radio-group>
1
2
3
4
5
6
7
8

/* 未选中时样式 */
/* radio .wx-radio-input --> radio外形*/
.ans .radio radio .wx-radio-input {
    /* visibility: hidden; */
    width: 100rpx;
    height: 100rpx;
    line-height: 100rpx;
    border-radius: 50rpx;
    text-align: center;
    box-sizing: border-box;
}
/* radio .wx-radio-input::before --> radio文字*/
.ans .left radio .wx-radio-input::before {
	/*单选框内文字内容*/
    content: "√";
    color: #5BBAB7;
    font-size: 40rpx;
}
.ans .right radio .wx-radio-input::before {
    content: "×";
    color: #ee9377;
    font-size: 40rpx;
}

/* 选中后样式，注意加!important */
radio .wx-radio-input.wx-radio-input-checked {
    background-color: cornsilk !important;
    box-sizing: border-box !important;
    border: none !important;
}
radio .wx-radio-input.wx-radio-input-checked::before {
    font-size: 40rpx !important;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

5.自定义radio样式——隐藏radio样式，通过label自定义

<radio-group class="ans" bindchange="changeValue">
   <view class="radio left">
        <label style="background-color:{{current.a==='a'?'cornsilk':'white'}}"><radio checked="{{current.a==='a'}}" value="a"></radio>{{current.text_a}}</label>
    </view>
    <view class="radio right">
        <label style="background-color:{{current.b==='b'?'cornsilk':'white'}}"><radio checked="{{current.b==='b'}}" value="b"></radio>{{current.text_b}}</label>
    </view>
</radio-group>
1
2
3
4
5
6
7
8

/* 自定义label样式 */
.ans .radio label {
	...
}
/* 未选中时样式 */
/* radio .wx-radio-input --> 隐藏radio*/
.ans .radio radio .wx-radio-input {
    visibility: hidden;
    width: 0rpx;
    height: 0rpx;
}
1
2
3
4
5
6
7
8
9
10
11

6.长文本换行符，br 无效

设置css，使用\n

<text style="white-space:pre-wrap">\n</text>
1

页面交互

表单提交后自动清空内容

• 若表单数据非常多，通过value绑定清除会非常麻烦
• 找不到代码调用form的reset的接口

1. form使用bindreset事件提交数据，而不使用bindsubmit事件，这样点击提交后会自动清空表单内容

2. 但是这样会带来一个新问题：使用bindreset无法从事件参数e.detail.value.name获得表单数据

3. 因此需要在表单绑定事件获取内容

   <input bindinput="inputText"/>
   
   inputText: function(e) {
       this.data.quesText=e.detail.value
   }
   1
   2
   3
   4
   5

bug

预览图片时点击事件src为空

<image>得使用data-src绑定路径，这样e.currentTarget.dataset.src的值才不为undefined
1

无法进行双向数据绑定

通过bindInput事件和setData方法

 <input bindinput="inputText" value="{{text}}"/>

 inputText: function(e) {
    this.setData({
      text: e.detail.value,
    })
  }
1
2
3
4
5
6
7