微笑小程序的相关知识

现在的前端工程师职责越来越重要,很多新的技术都是从前端领域分离出来,微信小程序就是一个很好的前端技术的实践。开发微信小程序前,总觉得神秘面纱不可及,但经过前端团队一个月辛苦奋战,微信小程序从此不再陌生,而变得熟悉和可控。现在,小程序终于上线了,我也终于有时间来分享一下开发过程中遇到的问题。

0、开发过程中需要遵守的两条原则

①项目整体容量小于等于2M;②项目页面栈容量5级

官方声明:为了不让用户在使用小程序时造成困扰,我们规定页面路径只能是五层,请尽量避免多层级的交互方式。

其他注意事项:

一、App() 必须在 app.js 中注册,且不能注册多个。

二、不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。

三、不要在 onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。

四、通过 getApp() 获取实例之后,不要私自调用生命周期函数。

五、为了方便开发者减少配置项,我们规定描述页面的这四个文件必须具有相同的路径与文件名。

1、项目搭建过程

对于经验丰富的程序员来说,项目搭建(前端框架搭建)其实是最没有技术含量的工作,但项目配置可是最有含金量的工作。具体项目搭建流程请参考微信小程序官方教程 ,此处略过。若果是团队协作开发,需要将项目放在GitHub上的步骤是,先搭建项目,后放入GitHub本地仓库后上传。

因为,微信小程序在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 quick start 项目。选择“是”,开发者工具会帮助我们在开发目录里生成一个简单的 demo。如果文件夹不为空,则不会生成demo。

2、项目目录结构和功能说明

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page,项目框架搭建成功后,可以看到微信小程序的目录结构非常简单:根目录结构是,一个pages文件夹,同级目录还有三个文件(app.js、app.json、app.wxss),pages文件夹存放所有页面。

对实际项目结构目录进行改造:

在根目录下创建images文件夹用来存放图片;

创建utils文件夹用来存放公共js文件,比如,表单验证函数库(还可以包含时间格式化模块formatTime,域名配置模块domainConfig,省市区三级内容模块city):

在utils文件夹下面新建validater.js文件,var validater = {...some function}创建对象封装一系列函数,最后导出module.exports.validater = validater;

在根目录脚本文件app.js中载入,letvalidater = require(‘utils/validater.js‘); || import { validater } from ‘utils/validater‘;两种方式均可,并在项目的整个生命周期函数上注册App({validater: validater});。(node的module遵循CommonJS规范,requirejs遵循AMD,seajs遵循CMD)

在实际页面进行调用,getApp().validater.isEmail(value),对具体value值进行处理

当然,项目的整体配置可根据项目要求进行灵活搭配,目录结构和功能可依据需求进行定制。

3、每一个单页面都是由一个文件夹和四个文件组成

文件夹名称是该单页面的名称,首字母大小写均可,内容由JS、JSON,WXML和WXSS四个文件组成,文件功能可参考微信小程序具体说明。

注意:为了方便开发者减少配置项,我们规定描述页面的这四个文件必须具有相同的路径与文件名。

4、页面栈原理

在小程序官方文档 API章节中的导航目录中,封装了5种导航方式,分别为wx.navigateTo、wx.redirectTo、wx.switchTab、wx.navigateBack、wx.reLaunch。由于微信的页面路径深度最多是五层,因此在用选择当行方式很重要。因为,微信小程序的左上角有返回按钮,返回按钮的意思是回退到上一个页面,但当导航跳转方式选择错误,第一,会导致返回的不是上一个页面;第二,导航跳转无法载入,由于5级页面栈容量已经饱和。

wx.navigateTo(OBJECT)保留当前页面,跳转到应用内的某个页面,该方法会往页面栈中增加一条记录;

wx.redirectTo(OBJECT)关闭当前页面,跳转到应用内的某个页面,该方法会不会增加页面栈记录,保持页面栈原始内容;

wx.reLaunch(OBJECT)基础库 1.1.0 开始支持,低版本需做兼容处理,关闭所有页面,打开到应用内的某个页面,该方法会清空页面栈全部记录;

wx.switchTab(OBJECT)跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,该方法和和页面栈无关;
    wx.navigateBack(OBJECT)关闭当前页面,返回上一页面或多级页面,该方法会删除页面栈中一条记录;

查看页面栈容量的方法,以及各页面中存储的数据:可通过 getCurrentPages() 获取当前的页面栈信息,

let arr = getCurrentPages();//页面栈数据数组,存储页面栈中页面js文件中data对象

arr[arr.length - 1]可以获取到当前页面的相关信息;

比如,获取(重置)上一个页面的中的某个参数,let previousThis = arr[arr.length - 2],previousThis.data.contactorList可以拿到数据,previousThis.data.setData({contactorList:[]})可以重置数据。

页面栈数组对象getCurrentPages()中包含的信息量非常大,有效利用这个对象对于开发效率事半功倍。

5、页面传参和参数回显

由于小程序开发没有组建的概念,因此可以理解为SPA单页面应用开发,对于一款产品,只要页面的基本功能相同,就可以复用。因此,一款再复杂的产品,不同的单页面也不超过十几个。在小程序开发过程中,复用页面是最常用的方案。比如,A页面可以实现某个功能,这时C页面、D页面和F页面都需要用A页面的功能,就可以把A页面当做一个模板来使用,A页面接收父级页面传递来的参数,进行处理后,可以传递给父级页面需要的数据。

页面之间的通信:

A页面跳转到B页面,通过URL拼接传递参数常用的两种方案:

方案一:A页面通过添加点击事件跳转传参,wx.navigateTo({url:‘./B/index?parameter01=one&parameter02=two‘}),B页面接收A页面的参数,onLaunch:function(options){console.log(options.parameter01)}。A页面通过URL地址问号?后拼接的参数,可以在B页面的 onLaunch函数 和 onShow函数 的形参中options对象中获取。

注意事项:通过URL拼接的方式传递参数的类型是对象或者数组,在传递的时候应当使用JSON.stringify(obj || array)进行json数据编码,然后在拿到数据时应当使用JSON.parse(obj || array)进行数据解码。

方案二:A页面通过导航组件navigator传递参数,<view><navigator url="./B/index?title=navigate">跳转到新页面</navigator></view>,B页面接收参数童方案一。

getCurrenPage获得A中的参数,可做回

不通过URL拼接传递参数的方案:通过原生数组对象 getCurrentPages() 获取页面栈信息,从而拿到需要的参数。方案具体步骤如下:

实例:A页面 data对象 中的一个 address参数 是用来存储用户的住址信息并显示在A页面的具体位置,当用户点击A页面的地址输入框时会跳转到存储地址列表的B页面,用户可点击直接选择获取,选择成功会跳转到A页面,并显示用户的选项。这个交互功能涉及到两个知识点:

第一,B页面给A页面参数赋值的方案

var arr=getCurrentPages(),获取页面栈数组;

var previousThis=arr[arr.length - 2],获取A页面的this指针;

previousThis.data.address=‘new address‘,给A页面的数据赋值;

第二,在A页面中操作B页面的显示内容

previousThis.setData({address:previousThis.data.address}),可在B页面返回A页面之前,让A页面正确显示出用户的操作内容。(可以将上述的previousThis.data.address=‘new address‘和previousThis.setData({address:previousThis.data.address})步骤合二为一成previousThis.setData({address:‘new address‘}))

在实际项目的开发过程中,一个页面显示的所有内容,往往是从接口直接拿到返回的数据显示出来,在B页面进行操作的时候,也是和后台接口通信,对数据库内容进行增加和删除,因此在做回显处理时,不同过页面栈信息的方式操作回显内容,而是通过重新请求接口的方式来刷新并显示最新数据。

因此,通过wx.navigateBack(OBJECT)从B页面返回A页面后,保证A页面显示的是最新数据,需要在A页面中做特殊处理,A页面中所有从后台接口拿到的作为显示的数据,进行wx.request({url: ‘test.php‘,data: {},header: {},success: function(res) {}})数据请求的方法必须放在onShow: function(options) {// Do something when show.}中,这样才能保证wx.navigateBack(OBJECT)执行后从B页面返回A页面后,A页面会重新请求数据,并显示出来。

6、css样式

项目根目录下的app.wxss文件是小程序公共样式表,样式重置、样式初始化和公共样式可以放在这个文件中,这里面的样式属于全局样式,作用于任何一个页面(即,在其他页面中不需要导入)。

同时,每个单页面都有自己依赖的样式文件,对于可复用的单页面的样式文件,如B页面可以复用A页面的样式文件,可以在B页面的wxss样式文件头部导入A页面的样式文件,方式如下:@import ‘../A/A.wxss‘;

7、底部标签导航的设置

补充页面栈知识:微信小程序框架以栈的形式维护了当前所有页面,当发生路由切换的时候,页面栈的表现如下:初始化-新页面入栈;打开新页面新页面入栈;页面重定向-当前页面出栈-新页面入栈;页面返回-页面不断出栈-直到目标返回页-新页面入栈;Tab 切换-页面全部出栈-只留下新的 Tab 页面;重加载-页面全部出栈-只留下新的页面。

底部Tab导航的配置在app.json中tabBar对象进行设置,实例如下:

"tabBar": {
    "selectedColor": "#00B4FF",//tab 上的文字选中时的颜色
    "list": [//tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
      {
        "pagePath": "pages/index/index",//页面路径,必须在 pages 中先定义
        "text": "首页",
        "color": "",//tab 上的文字默认颜色
        "iconPath": "image/1.png",
        "selectedIconPath": "image/1_hover.png"
      },
      {
        "pagePath": "pages/message/index",
        "text": "消息",
        "iconPath": "image/2.png",
        "selectedIconPath": "image/2_hover.png"
      },
      {
        "pagePath": "pages/my/index",
        "text": "我的",
        "iconPath": "image/3.png",
        "selectedIconPath": "image/3_hover.png"
      }
    ]
  },

8、HTML5标签的自定义属性data-*

在html标签中加入自定义属性data-*用于存储页面的自定义数据,然后在元素绑定的方法中可以获取数据

注意事项:属性名不能包含大写字母,在 data- 后必须至少有一个字符;该属性可以是任何字符串;自定义属性前缀 "data-" 会被客户端忽略。

具体应用:

场景一:

<View wx:for="{{contactorList}}" wx:key="unique">

<View bindtap="reEditor" data-info="{{item}}" data-reeditIndex="{{index}}"></View>

</View>

reEditor(e){

let info = e.currentTarget.dataset.info;//js中获取绑定的数据

let index = e.currentTarget.dataset.index;//js中获取绑定的数据

}

微信小程序的 列表渲染 很常用,对一个数组的数据重复渲染出该组件集合,需求:对数组的每一个数据需要绑定事件同时获取 数据 和 索引值,此时,可以用自定义属性data-*在html元素上绑定数据,在函数中的e对象中获取绑定的数据。

注意:绑定的函数bindtap必须和data-*绑定的数据在同一个html元素上绑定,不然无法获取数据

场景二:

通过获取 html元素对象 属性的方法getAttribute()获取绑定的数据,也可以通过 获取元素节点后 用 HTML5自定义属性对象Dataset 获得需要的数据document.getElementById(‘owl‘).dataset.animal-type

function showDetails(animal)
{
var animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>

</ul>

9、数据动态显示

微信的数据都存储在js文件中的data对象中,改变数据有两种方式:this.data.key = value;这种方法不会触发二次渲染;this.setData({key:value});这种方法可以触发二次渲染;因此,对于任何需要显示的数据或元素,发生变化时需要用第二种方法。

10、注意事项

原型psd图的尺寸在书写wxss样式文件时,按照1px写成2rpx的方式

<Text>标签嵌套<View>标签后,<View>标签中的任何内容都不会显示出来

11、项目整体 数据接口 和封装 公共函数 对象配置

项目整体配置可以在app.js的App({})方法中配置,App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。

App({
    HOST: ,//主机域名

loginCode: ,//用户身份验证码

validater: ,//正则校验对象

formatTime:,//日期时间对象

onLaunch: function (e) {},

onShow: function (e) {},

onHide: function (e) {},

onError: function (e) {},

});

配置好以上文件后,在进行数据请求时的形式:

wx.request({url: getApp().HOST + ‘/interface/name‘,header: {},data: { key:value },method: ‘GET‘,
    success: function(res) {},
    fail: function(res) {}
})

在进行方法调用时的形式:getApp().formatTime.time(str);将 时间戳 转换为 08:30 的格式函数

12、表单组件input应用

基础应用,一个input组件绑定一个函数:

<input  bindinput="input" value="{{inputValue}}" placeholder="" />
input: function(e) {
    this.setData({
      inputValue: e.detail.value
    })
},

多输入应用,一个input组件绑定一个函数看起来很繁琐,可以采用多个input组件绑定一个函数的方案:

<input bindinput="inputFn" value="{{info.name}}" data-key="name"/>
<input bindinput="inputFn" value="{{info.age}}" data-key="age"/>
<input bindinput="inputFn" value="{{info.address}}" data-key="address"/>
<input bindinput="inputFn" value="{{info.mobile}}" data-key="mobile"/>
inputFn(e){
    var key = e.target.dataset.key;
    var value = e.detail.value
    this.data.info[key] = value;
    this.setData({
        info: this.data.info
    })
}

13、图片的上传和下载显示

前后端开发下载显示图片的方案:

图片的html容器:

<view  wx:for="{{imageArr}}" wx:key="item.id">

<image class="slide-image" mode="scaleToFill" src="{{Item}}" data-index="{{index}}"></image>

</view>

图片数据的请求处理:

wx.request({
    url: url,
    success(res){
        let data = res.data.imageArr;//返回的图片url没有域名,只有相对路径,需要做域名拼接处理["/1.jpg","/2.jpg","/3.jpg"]
        for(let i = 0; i < data.length; i++) {data[i] = ‘http://img.wanshaobo.com‘ + data[i];}
        this.setData({imageArr: data});//图片显示操作
    }
})

图片的本地显示和网络上传方案:

图片的html容器,HTML结构的理解可以参考下面的实例图片:

<view wx:for="{{imageArr}}" wx:key="id">
    <image mode="scaleToFill" src="{{item.imgUrl}}"></image>
    <icon type="clear" size="16" bindtap="deleteImg"></icon>
</view>
<view bindtap="uploadImg"><image src="../plus.png"></image></view>

图片的添加显示和网络上传:

第一步,点击加号图标向页面添加并显示图片,调用微信小程序API-媒体-图片-wx.chooseImage(OBJECT)从本地相册选择图片或使用相机拍照

wx.chooseImage({
  count: 9 - imageArr.length,
  success: function (res) {
//res.tempFilePaths图片的本地文件路径列表:["wxfile://tmp_1.png","wxfile://tmp_2.png","wxfile://tmp_3.png"]
//res.tempFiles图片的本地文件列表,每一项是一个 File 对象:[{path:"wxfile://tmp_1.png",size:1021},{path:"wxfile://tmp_2.png",size:21},{path:"wxfile://tmp_3.png",size:103}]
  this.data.imageArr.push(res.tempFilePaths)
  that.setData({imageArr:this.data.imageArr});

}

})

第二步,调用微信小程序API-网络-上传、下载-wx.uploadFile(OBJECT)
将本地资源上传到开发者服务器。如页面通过 wx.chooseImage 接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data 。

上传图片到自己图片服务器后的成功回调函数会返回一个对象,该对象是存储图片的服务器返回的数据,包含了该图片的URL地址,这个URL地址就是以后拿到该图片的唯一URL路径。

imageArr.forEach((item,index)=>{
  wx.uploadFile({
    url: ‘https://wsb-file.wanshaobo.com/file/simpleUpload‘,
    filePath: item,
    name: ‘file‘,
    header: { ‘content-type‘: ‘multipart/form-data‘ },
    success: function (res) {
    //res.data:"{"msg":"上传成功","code":200,"filePath":"/group1/M00/0A/F1/wKgGS1lfUYeAfnPLAAATCakKLos829.png"}"
    //res.errMsg:"uploadFile:ok"

this.data.imgsArr.push(JSON.parse(res.data).filePath)//图片成功上传返回的URL路径数组,不包含主机名

this.data.imgsStr = this.data.imgsArr.join(‘,‘)//存储在数据库中属于该用户的图片URL数组拼接的字符串
    }
  })

})

样式效果实例如下图:

14、获取用户地理位置名称的方案

比如:北京市东城区和平西桥58号

需要用的的API接口:

API-开放接口-设置-wx.getSetting(OBJECT)//获取用户当前设置,成功回调res.authSetting ={

scope.userInfo": true,//用户信息

"scope.userLocation": true//地理位置

"scope.address": true//通讯地址

"scope.record": true//录音功能

"scope.writePhotosAlbum": true//保存到相册

}

API-开放接口-授权-wx.authorize(OBJECT)

API-位置-获取位置-wx.chooseLocation(OBJECT)

具体代码分析:第一步,通过 wx.getSetting 查询用户是否授权了 "scope.userLocation" 这个 scope;第二步,通过 wx.authorize 接口打开‘地理位置’授权界面对userLocation进行授权;第三步,通过 wx.chooseLocation 接口打开地图选择位置

wx.getSetting({

success(res) {

if (!res[‘scope.userLocation‘]) {

wx.authorize({
        scope: ‘scope.userLocation‘,
        success() {

wx.chooseLocation({success: function (res) {res.address;res.longitude;res.longitude;});

}
      })
    }

}

})

15、自定义页面的滚动选择器

需求,如下图所示,实现逻辑,第一步,对页面元素进行堆叠排列,页面正文内容z-index:0;半透明蒙层z-index=1,宽高占据满屏;滚动选择器z-index=2:第二步,对选择器样式进行设计,需要用到<picker-view><picker-view-column></picker-view-column></picker-view>组件;第三步,对透明蒙层区域、取消按钮、确定按钮添加事件处理函数。

微信小程序的原生滚动选择器仅有三种类型,普通选择器,时间选择器,日期选择器,但现在的选择器需求是:年月日时分秒。

HTML结构如下:

<view class="mask" bindtap="clickMask"></view>

<view class="datePicker">

<view class="pickerBtn"><text bindtap="cancel">取消</text><text bindtap="confirm">确定</text></view>

<picker-view  value="{{dateValue}}" bindchange="dateChange">

<picker-view-column><view wx:for="{{years}}">{{item}}年</view></picker-view-column>

<picker-view-column><view wx:for="{{months}}">{{item}}月</view></picker-view-column>

<picker-view-column><view wx:for="{{days}}">{{item}}日</view></picker-view-column>

<picker-view-column><view wx:for="{{hours}}" >{{item}}时</view></picker-view-column>

<picker-view-column><view wx:for="{{minutes}}">{{item}}分</view></picker-view-column>

<picker-view-column><view wx:for="{{seconds}}">{{item}}秒</view></picker-view-column>

</picker-view>

</view>

数据绑定方案:

数据初始化,定义初始化显示的数据是当前的日期时间:

this.setData({dateValue: [‘0‘,date.getMonth(),date.getDate()-1,date.getHours(),date.getMinutes()]})

年份列表显示当前年份到后三十年,对于具体月份显示的天数列表需要做特殊处理,1-3-5-7-8-10-12每月31天,4-6-9-11每月30天,2月的天数最为特殊,闰年2月份为29天,平年2月份为28天,每月天数处理如下:

var date = new Date();

var year = date.getFullYear();//获取当前年份

var month = date.getMonth() + 1;//获取当前月份

var days ;//定义当月的天数;

if(month == 2){

days= ((year % 4 == 0 && year % 100 != 0) || year % 400 ==0) ? 29 : 28;//闰年29天,还是平年

}else if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){

days= 31;//月份为:1,3,5,7,8,10,12 时,大月.天数为31

}else{

days= 30;//其他月份,小月,天数为30.

}
for (let i = 1 ; i <= days; i++) {

daysArr.push(i)

}

月份列表滚动选择器发生变化时,天数选择器的天数数组也需要做响应式实时变化,当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始):

dateChange(e){//月份发生变化时需要改变响应的天数

var date = new Date(),days = []

var year = date.getFullYear() + e.detail.value[0];//获取年份

var month = e.detail.value[1] + 1;//获取月份

var days ;//定义当月的天数;

if(month == 2){

days= ((year % 4 == 0 && year % 100 != 0) || year % 400 ==0) ? 29 : 28;//闰年29天,还是平年

}else if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){

days= 31;//月份为:1,3,5,7,8,10,12 时,大月.天数为31

}else{

days= 30;//其他月份,小月,天数为30.

}

this.setData({days: days})

var dateArr = e.detail.value

this.setData({

year: this.data.years[dateArr[0]],

month: this.data.months[dateArr[1]],

day: this.data.days[dateArr[2]],

hour: this.data.hours[dateArr[3]],

minute: this.data.minutes[dateArr[4]]

})

}
---------------------
作者:FEBruce
来源:CSDN
原文:https://blog.csdn.net/wanshaobo888/article/details/74452402
版权声明:本文为博主原创文章,转载请附上博文链接!

原文地址:https://www.cnblogs.com/chendezhen/p/10148301.html

时间: 2024-10-03 16:31:45

微笑小程序的相关知识的相关文章

单片机入门指南系列(十) 单片机程序下载相关知识

原文发表自我的个人主页,欢迎大家访问 http://purplesword.info/mcu-primer-10 注:本篇在写<单片机入门指南系列>之前就已经写过,现在发现这篇比较合理的位置,应该是放在<单片机入门指南系列(六) 单片机最小系统--麻雀虽小,五脏俱全>之后的,但是由于之前考虑不周,所以只好放在这里了,也就不重新修改文章的位置了. 作为基础知识补充,本篇详细介绍了串口.51单片机的ISP下载等知识,虽然这些知识并不一定要很了解也能学习单片机,但是有一些概念有时对解决问

微信小程序--图片相关问题合辑

图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.previewImage预览图片 微信小程序之预览图片 小程序开发:上传图片到腾讯云 .NET开发微信小程序-上传图片到服务器 微信小程序本地图片处理--按屏幕尺寸插入图片 [微信小程序]上传图片到阿里云OSS Python Flask小程序文件(图片)上传技巧 小程序图片上传阿里OSS使用方法 微信小程序问题汇

微信小程序开发基础知识总结

微信小程序在无论在功能.文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们的小程序在很多方面突破H5页面应用的限制,更加接近原生程序的功能,因此微信小程序具有很大的前景想象力.它提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上. 1.小程序的目录结构 小程序的目录结构如下所示. 其中项目级别的的文件包括 app.js.ap

微信支付之扫码支付、公众号支付、H5支付、小程序支付相关业务流程分析总结

前言 很久以来,一直想写一篇微信支付有关的总结文档:一方面是总结自己的一些心得,另一方面也可以帮助别人,但是因种种原因未能完全理解透彻微信支付的几大支付方式,今天有幸做一些总结上的文章,也趁此机会,将一年多以来的相关经验分享一下. 概述 1. 扫码支付 商户在pc端展示一个支付二维码,用户使用微信扫一扫功能,扫码后实现付款的支付方式. 2. 公众号支付 商户在微信APP内(微信浏览器)打开H5网页,通过微信支付实现付款的支付方式. 3. H5支付 商户在微信浏览器以外的手机浏览器打开H5网页,通

开发一个微笑小程序示例

一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开发与管理->配置服务器中,点击“开发者设置”.3.会获得一个AppID,记录AppID,后面创建项目时会用到. 注意:如果要以非管理员微信号在手机上体验该小程序,那么我们还需要操作“绑定开发者”.即在“用户身份”-“开发者”模块,绑定上需要体验该小程序的微信号.本教程默认注册帐号.体验都是使用管理员微信

关于今日头条小程序(字节跳动小程序)相关问题

上周突然遇到让开发今日头条小程序(字节跳动小程序)的需求,然后看了下文档发现真的简陋.而且文档有错别字.槽点有点多.但是和老版本的小程序相差不多,然后我就抱着试一试的心态,真的是试一试把微信小程序换了个id,然后打包上传,发现竟然跑的通!跑的通!跑的通!再说一次跑的通.当时我的内心是崩溃的,说好的tt.标签那,这样照搬真的好吗,好歹稍微改下啊. 先说下遇到的提审不通过的几个原因: 1.在部分页面有微信分享或者微信二维码等和微信有关的东西(因为是直接把微信小程序扔过去的所有清楚有点麻烦) 2.要求

微笑小程序的几种跳转方式

微信小程序页面跳转 的几种方式 最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式 一.wx.navigateTo(OBJECT) 这是最普遍的一种跳转方式,其官方解释为:"保留当前页面,跳转到应用内的某个页面" 类似于html中的 window.location.href=" "eg: wx.navigateTo({ url: 'test?id=1' })实际效果如下: 小程序中左上角有一个返回箭头,可返回上一个页面 也可以通过方法  wx.nav

微信小程序~触摸相关事件(拖拽操作、手势识别、多点触控)

touchstart     手指触摸动作开始 touchmove    手指触摸后移动 touchcancel  手指触摸动作被打断,如来电提醒,弹窗 touchend      手指触摸动作结束 拖拽操作案例1: 注意按钮拖出屏幕边缘处理 <view id="id" bindtouchmove="handletouchmove" class='demo' style='top:{{ballTop}}px; left: {{ballLeft}}px'>

微信应用号小程序开发(金华火爆版)

想必大家都关心微信应用号的最终形态到底是什么样子?怎样将一个「服务号」改造成为「小程序」? 金华腾云科技分享:开发过程吧. OK,为了让大家尽快看到这份教程!今晚开始更新,希望明天一早就能发布第一篇教程!记录开始!看看几天能完成变身吧! 序言开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开