小程序入门就看这篇（小程序基础）

小程序入门就看这篇（小程序基础）

说明

文章为实战中踩坑经历，以及解决方案。同时是自己的一个项目回顾，在这里分享给大家，希望能帮助到大家，如果觉得文章对你有用，请点个赞，谢谢！原谅我也是个标题党：）

登录授权

授权（基本信息，手机号码 ）必须使用小程序原生的的button组件，然后指定open-type 后通过回调才能拿到用户信息。代码入下：

index.wxml 你还未登录，请先授权登录 授权登录 你还未绑定手机号，请先去绑定 立即绑定 index.jspage({ // ... data: { hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), userInfo: {}, getUserInfo: false, getPhone: false, hasAuth: false }, onLoad: async function () { var that = this; // 查看是否授权 wx.getSetting({ success: function (res) { if (res.authSetting['scope.userInfo']) { wx.login({ success: loginRes => { // 获取到用户的 code 之后：loginRes.code wx.getUserInfo({ success: async function (res) { // 这里处理业务逻辑 } }) } }) } else { // 用户没有授权 } } }); }, bindGetUserInfo: function (e) { // 需要什么信息都从e中拿到 以下部分业务逻辑 if (e.detail.userInfo) { //用户按了允许授权按钮 var that = this; // 获取到用户的信息 wx.login({ success: async res => { const aUserModel = new UserModel(); const params = { code: res.code, encryptedData: e.detail.encryptedData, iv: e.detail.iv } const { data } = await aUserModel.login({ ...params }) if(data.roles){ // do ... } if (data.mobile) { // do ... } } }); //授权成功后,通过改变 isHide 的值，让实现页面显示出来，把授权页面隐藏起来 that.setData({ isHide: false }); } else { //用户按了拒绝按钮 wx.showModal({ title: '警告', content: '拒绝授权，您将无法使用小程序', showCancel: false }); } }, getPhoneNumber: async function (e) { if (e.detail.encryptedData) { //用户按了允许授权按钮 const aUserModel = new UserModel(); const params = { userId: userInfo.id, encryptedData: e.detail.encryptedData, iv: e.detail.iv } // do ... } else { //用户按了拒绝按钮 wx.showModal({ title: '警告', content: '拒绝授权，您将无法使用小程序', showCancel: false }) } }, // ...})-

路由

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

这2个钩子函数足够我们简单的跳转，更复杂的场景下可以通过存Storage这种存取参数来返回到上一个页面进行操作，感觉不是优雅，但是没有好的办法解决了。

Storage

场景：storage有2种方式获取，当你直接wx.getStorageSync('xxx')获取一个id，去请求接口的可能是获取不到就已经发送请求了，导致出现bug。

因为wx.getStorageSync('xxx')是异步的 我们可以利用 async/await去方便的使用

onLoad: async function (options) { const editListParams = await wx.getStorageSync('editListParams') this.findReportDetails(editListParams)}-

webView

webview不是在某个页面使用的，当时我以为是类似iframe这种东西嵌入到页面。正确的使用态度是新建一个page页面，然后跳转到这个page去使用。例如跳转到小程序关联的公众号文章：

other.wxml跳转到webViewwebView.wxml-

request

微信自带的网络下的request，虽然能拿来就用，如果不封装就会造成代码冗余。大家可自行参考如下封装

ajax.jsimport { baseURL } from '../config/interfaceURL' // baseUrlclass AJAX { AJAX ({ url, methods = 'GET', data = {} }) { return new Promise((resolve, reject) => { this.request(url, resolve, reject, methods, data) }) } request (url, resolve, reject, methods, data) { wx.request({ url: baseURL + url, method: methods, data: data, header: { 'content-type': 'application/json' }, success: res => { const code = res.statusCode.toString() if (code.startsWith('2')) { resolve(res) } else { reject() const errorMessage = res.data.message AJAX.showError(errorMessage) } }, fail: err => { reject() AJAX.showError("网络异常，请稍后重试！") } }) } static showError (errorMessage) { wx.showToast({ title: errorMessage, icon: 'error', duration: 2000 }) } static serializeLink (obj) { // 序列化get请求 let temp = '?' for (let index in obj) { if(obj.hasOwnProperty(index)){ temp += (index + '=' + obj[index] + '&') } } return temp.substr(0, temp.length - 1) }}export default AJAX// model层调用UserModel.jsimport AJAX from '../utils/AJAX'export class UserModel extends AJAX { // 小程序授权登陆 login (params) { return this.AJAX({ url: `/service/api/users/applet/login`, data: params, methods: 'POST' }) }}// control调用index.jsasync onLoad (options){ const aUserModel = new UserModel() const params = { code: loginRes.code, encryptedData: res.encryptedData, iv: res.iv } const { data } = await aUserModel.login({ ...params }) // 其他}-

npm生态以及第三方ui框架

直接通过初始化的微信小程序项目里面没有package.json文件。所以在使用npm install xxx 是没有卵用。所以我们要自己在文件夹根目录下执行npm init 。这时候才能通过微信开发者工具构建npm，构建成功会生成一个目录。推荐用有赞的vant小程序版,社区较活跃，使用起来不会有很多坑。

双向绑定

对于习惯使用vue的开发者来说，少了这个v-model语法糖。在处理表单的双向绑定会显得比较蛋疼。所以还是有必要说下小程序里面的双向绑定是怎么样的。

file:index.jsPage({ data: { list: [] }, onLoad: function (options) { // do ... }, onInput (e) { let value = e.detail.value let temp = e.target.dataset.name.split(',') let tempKey = temp[1] let tempIndex = temp[0] let tempSubIndex = temp[2] let targetKey = `list[${tempIndex}].children[${tempSubIndex}].${tempKey}` this.setData({ [targetKey]: value }) }})file:index.wxml -

-图片和-图片授权

这里场景是-一个固定的静态资源图片，网络图片需先配置download域名才能生效,方法如下：

savePhoto () { const _this = this; wx.getImageInfo({ src: '/static/images/home/Qr.png', success: function (res) { wx.saveImageToPhotosAlbum({ filePath: res.path, success (result) { _this.setData({ show: false }); wx.showToast({ title: '保存成功', icon: 'success', duration: 2000 }) }, fail (err) { if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") { wx.openSetting({ success (settingdata) { if (settingdata.authSetting['scope.writePhotosAlbum']) { _this.savePhoto() } else { wx.showToast({ title: '获取权限失败,无法保存图片', icon: 'success', duration: 2000 }) } } }) } } }) } }) }-

保存图片也是需要授权的，看代码就完事了。

其他

textarea 在ios上表现会有padding值。我曹 这个就坑了。我采用要不全是textarea或者全是input 这种去实现表单的填写。其他样式问题也蛮多的，有点ie的味道。！！ 多用flex float去解决一些差异吧~

结语

文章每个点都是开发小程序的时候遇到的问题，本人能力有限，欢迎大家在评论区提问题交流学习，也可以关注好享家公众号获取更多优质文章。

推荐教程：《微信小程序》

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。