微信小程序开发实践：带你从0到1实现第一个小程序，并发布上线文章可以帮助你避开一些坑，实现并发布你的第一个微信小程序。准备工作登录微信公众平台-小程序：https://mp.weixin.qq.com/cgi-bin/wx，完成申请注册，生成重要的AppID（小程序唯一身份证）程序：开发→开发设置获取）。安装小程序开发工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，界面使用其他编译器，点击上方编译查看模拟器中的效果，点击在预览上用手机扫码查看效果，如图：创建第一个小程序项目，填写AppID。如果选择云开发，可以使用云函数、云数据库、云存储函数，如图：小程序详细开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/（遇到问题一定要看文档！看文档！看文档！重要的事情说3遍！！！详细易懂，少走弯路）一、小程序代码组成1）文件目录:.├──cloudfunctions#云开发函数│├──login//登录文件夹│├──index.js//登录云函数││└──package.json//npm包依赖│└──movielist//获取电影列表文件夹├──miniprogram#本地开发目录│├──style//静态wxss文件│├──fonts//字体图标文件│├──images//图片│├──components//Store公共组件库│├──utils//全局js方法││└──common.wxs//js处理方法│├──pages//每个页面││├──movie//电影列表│││├──movie.js│││├──电影。json│││├──movie.wxml│││└──movie.wxss││└──detail//电影详情││├──detail.js││├──detail.json││├──detail.wxml││└──detail.wxss│├──app.js//全局注册小程序对象│├──app.json//全局配置│├──app.wxss//全局样式│└───package.json//npm配置文件├──project.config.json#项目配置文件└──README.md#README2）.json后缀JSON配置配置文件：app.json全局配置小程序的页面路由、底部标签、顶部标题等。page.json页面配置可以声明不同于全局配置的配置，只在本页面生效，也可以引入组件。pages字段控制当前所有页面路径，第一个默认为首页；窗口字段控制窗口背景颜色、标题等；tabBar控件分为多个标签页，list数组长度为2到5，参数包括图标、字体颜色、页面路由。//全局配置文件"pages":["pages/movie/movie",//第一个默认为首页"pages/profile/profile","pages/detail/detail"],"window":{"backgroundColor":"#F6F6F6",//下拉背景色"backgroundTextStyle":"light",//下拉字体样式"navigationBarBackgroundColor":"#00B51D",//窗口标题背景颜色"navigationBarTitleText":"LatestMovies",//窗口标题文字"navigationBarTextStyle":"white"//窗口标题字体颜色},"tabBar":{"color":"#000000",//tabbarDefaultfontcolor"selectedColor":"#E54847",//Tab列选中字体颜色"list":[{"pagePath":"pages/movie/movie",//tab路径"text":"Movie",//tab栏文字"iconPath":"images/film.png",//默认图标路径"selectedIconPath":"images/film-actived.png"//选中的图标路径},{"pagePath":"pages/profile/profile","text":"My","iconPath":"images/profile.png","selectedIconPath":"images/profile-active.png"}]},//子页面配置文件{"usingComponents":{//注册vant-ui插件"van-button":"vant-weapp/button",//按钮组件"van-rate":"vant-weapp/rate",//评分组件"van-icon":"vant-weapp/icon"//图标组件},"navigationBarBackgroundColor":"#333",//子页面标题背景色"navigationBarTextStyle":"white",//子页面字体颜色"navigationBarTitleText":"MovieDetails",//子页面标题"backgroundColor":"#eee",//子页面下拉刷新背景颜色"backgroundTextStyle":"dark",//子页面下拉刷新字体颜色"enablePullDownRefresh":true//子页面下拉刷新}3）.wxml后缀的WXML模板文件：主要控制页面结构，开发方式为MVVM，你可以参考vue，注意以下：div,span把标签改成view和text；微信提供了一些现成的组件：轮播、日历、进度条等，也可以使用UI库vant-weapp。js方法不能在wxml文件中使用，需要用小程序脚本语言编写wxs文件中定义处理数据的功能（不允许js文件），然后在wxml中引入使用。varfilter={arrJoin:function(value){returnvalue.join('/')},formatDate:function(value){vardate=getDate(value)returndate.getFullYear()+'year'+date.getMonth()+'month'+date.getDate()+'day'}}module.exports={arrJoin:filter.arrJoin,formatDate:filter.formatDate}...type:{{filter.arrJoin(detailList.genres)}}{{filter.formatDate(detailList.created_at)}}...想看...4）.wxss后缀的WXSS样式文件：提供新的尺寸单位rpx（可根据屏幕宽度适配，指定屏幕宽度为750rpx。例如iPhone6上，屏幕宽度为375px，一共有750个物理像素，则750rpx=375px=750个物理像素，1rpx=0.5px=1个物理像素）。推荐使用iPhone6作为设计稿，单位容易转换，字体一般为px。设备rpx转换px(屏幕宽度/750)px转换rpx(750/屏幕宽度)iPhone51rpx=0.42px1px=2.34rpxiPhone61rpx=0.5px1px=2rpxiPhone6Plus1rpx=0.552px1px=1.81rpx/*pages/movie/@movie/.wxss*导入'../../style/common.wxss';/*导入常用样式*/.movi??e{height:420rpx;显示：弹性；底部边框：1rpxsolid#eee；填充：20rpx；颜色：#666;}.mv-img{高度：100%；宽度：300rpx；margin-right:20rpx;}...5).js后缀的JS脚本逻辑文件：注意：点击事件不能直接在方法中传参，需要定义data-id="id"，通过e获取。当前目标.dataset.id;data中的数据赋值时需要this.setData({id:e.currentTarget.dataset.id})，取值方法就是this。数据.id。......getMovie:function(){//获取电影列表，从云函数中获取movielistwx.showLoading({//调用微信加载组件title:'Loading',})wx.cloud.callFunction({//请求云函数名称：'movielist',data:{start:this.data.movi??eList.length,count:10}}).then(res=>{console.log(JSON.parse(res.result).subjects)this.setData({//将返回结果赋给movieListmovieList:this.data.movi??eList.concat(JSON.parse(res.result).subjects)//数组拼接})wx.hideLoading()//返回结果closedLoading}).catch(err=>{console.log(err)wx.hideLoading()//返回错误关闭loading})},gotoDetail:function(e){//跳转到新页面wx.navigateTo({url:`../detail/detail?movieid=${e.currentTarget.dataset.movi??eid}`,})},2.使用npm安装第三方插件，右键项目即可在终端打开，执行npminit初始化package.json文件；执行npminstallXX--production；检查详细信息->本地设置→使用npm模块；点击tools→buildnpm，就可以在项目中使用了；3.微信原生API可以方便调出微信提供的能力，列举一些常用的API：wx.navagateTo：保持当前页面，跳转到tabbar以外的其他页面，最多打开5页，返回上一页；wx.redirectTo：关闭当前页面，跳转到除tabbar以外的其他页面；wx.switchTab：跳转到tabBar页面并关闭所有其他非tabBar页面；wx.showToast：显示消息提示框，可设置延时消失；wx.showLoading：显示加载提示框主动调用wx.hideLoading关闭提示框；wx.request：发起HTTP网络请求；wx.chooseImage：从本地相册中选择图片或使用相机拍照，视频/音频/文件同理；wx.getLocation：获取当前地理位置，速度；wx.chooseLocation：打开地图选择位置，可以获得目标经纬度和详细地址；wx.getUserInfo：获取用户信息，用户昵称、性别、头像、国家城市、语言等；wx.getWeRunData：获取用户近30天的微信移动步数；wx.scanCode：调用客户端扫码接口进行扫码；wx.makePhoneCall：拨打电话；......3.云开发1)云数据库：云开发提供了一个JSON数据库，数据库中的每条记录都是一个JSON格式的对象。一个数据库可以有多个集合（相当于关系数据中的表）。集合可以看作是一个JSON数组。数组中的每个对象都是一条记录，记录的格式是一个JSON对象。支持导入导出。//1.获取数据库引用//collection方法获取对集合的引用constdb=wx.cloud.database()//2.构造一条查询语句//get方法会触发网络请求从数据库中获取数据//where方法传入一个对象，数据库返回集合中字段等于指定值的JSON文档。该API还支持高级查询条件（如大于、小于、在等）db.collection('movie-collect').where({_openid:res.result.openid}).get().then(res=>{console.log(res)}).catch(err=>{console.log(err)})//3.构造insert语句//add方法会触发网络请求向其中添加数据数据库db.collection('user').add({data:{name:'ywbj',age:20}}).then(res=>{console.log(res)}).catch(err=>{console.log(err)})},//4.构造update语句//update方法会触发网络请求更新数据到数据库（doc中的唯一id）。db.collection('user').doc('dc9a49695da03b0f023d6cfd2fa15012').update({data:{age:18}}).then(res=>{console.log(res)}).catch(err=>{console.log(err)})},//5.构造delete语句//delete方法会触发网络请求导致数据库删除数据（注意：小程序中只能删除单条数据，并且需要在云函数中进行批量删除)db.collection('user').where({name:'ywbj'}).remove().then(res=>{console.log(res)}).catch(err=>{console.log(err)})},2)云端存储：云端开发提供存储空间，提供除了上传文件到云端和云端下载权限管理的能力，开发者可以使用通过小程序端和云功能端的API实现云存储功能。在小程序端，可以分别调用wx.cloud.uploadFile和wx.cloud.downloadFile来上传和下载云文件。//上传一个文件wx.chooseImage({//让用户选择一张图片并生成一个临时的图片路径success:chooseResult=>{//上传图片到云端存储空间wx.cloud.uploadFile({//指定wheretouploadCloudpathcloudPath:'my-photo.png',//指定要上传文件的小程序临时文件路径filePath:chooseResult.tempFilePaths[0],success:res=>{console.log('上传成功，返回文件ID',res.fileID)},})}})//下载文件wx.cloud.downloadFile({fileID:'',//文件IDsuccess:res=>{//返回临时文件文件路径console.log(res.tempFilePath)},fail:console.error})3)云函数：云函数是一段代码，运行在云端，无需管理服务器。可在开发工具中编写，一键上传部署，运行后台代码。功能相同的函数可以封装上传到云端函数统一调用。另外，使用云函数发送请求的好处是不受5个可信域名的限制，不需要备案。要发送请求，npm需要安装request-promise并导入：https://github.com/request/request-promise。//云函数入口文件constcloud=require('wx-server-sdk')cloud.init()varrp=require('request-promise')//云函数入口函数，假设有获取电影列表的接口exports.main=async(event,context)=>{returnrp(`http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=${event.start}&count=${event.count}`).then(res=>{returnres})}wx.cloud.callFunction({name:'movielist'，数据：{开始：this.data.movi??eList.length，计数：10}}）
