小程序开发常见问题(小程序常见问题汇总,方便自己看)
今天给各位分享小程序开发常见问题的知识,其中也会对小程序常见问题汇总,方便自己看进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
医疗行业开发小程序,应需要注意哪些问题?
开发社区医疗小程序关键技术
一场突如其来的疫情让民众意识到健康的重要性。 基于微信小程序即用即走,便利快捷的优点,汇总 市场的主流需求如何开发一款用户可以定位查询附近的 医院及去往路线、进行智能咨询、通过症状查询药品,同时提供了 交流互助平台等功能的小程序。让小程序通过移动互联网进行内容推送与需求 对接,真正意义上实现了信息时代对于健康卫生领域的促进作用。下面我们来看开发社区医疗小程序的关键技术有哪些?
小程序开发相关技术
小程序以微信开发者工具为平台,使用微信小程序原生框架, 融合云开发技术开发完成。服务端前台采用JavaScript、WXML、 WXSS和JSON等技术,后台数据利用云数据库进行处理,可以接收 请求,处理数据,操作数据库,存储数据。
关键技术分析
(1)缓存功能 微信小程序中缓存是一项重要的功能,缓存模块可以存储文 件、用户授权的信息等数据。“守卫宁+”小程序中用缓存模块实 现存储微信用户授权信息。 用户登录后,用wx.setStorage()方法获取的用户信息并存入本地缓 存中,当用户点击发布求助信息页面时,系统会用wx.getStorage()方法 从本地缓存中取值,调用用户信息。
(2)定位功能 微信小程序中常会使用用户定位信息,用户定位可为“守卫宁 +”的用户提供定位附近医院的服务。 用户使用导航功能时,用wx.getLocation()方法为用户定位当前 位置,寻找附近的医院、药店,实现导航功能。
(3)模糊搜索 “守卫宁+”为方便用户使用,提供了药品查找与医生查找功 能,通过与云数据库连接,用户可使用输入关键词的方式进行医生 或药品信息的模糊查找,提高了用户的查找效率。
其他技术
(1)爬虫数据 “守卫宁+”小程序的云数据库中存储了大量的医生、药品信息, 数据均采用爬虫技术在网上获取,生成表格后上传至平台云数据库中。
(2)内容管理CMS 平台提供了内容管理供管理员进行日常的数据维护和管理。
小程序开发有哪些坑
1. JSON 配置文件小程序中,包含唯一的全局配置文件 app.json,以及每个页面的配置文件 page.json。每单页页面相应的 JSON 文件会覆盖与 app.json 相同的配置项。如下,是一个包含了所有配置选项的简单配置 app.json。"pages": [ //设置页面的路径"pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合"pages/logs/logs"],"window": { //设置默认窗口的表现形式
"navigationBarBackgroundColor": "#ffffff", //顶部导航栏背景色
"navigationBarTextStyle": "black", //顶部导航文字的颜色 black/white
"navigationBarTitleText": "微信接口功能演示", //顶部导航的显示文字
"backgroundColor": "#eeeeee", //窗口的背景色
"backgroundTextStyle": "light", //下拉背景字体、loading 图的样式,仅支持 dark/light
"enablePullDownRefresh": "false", //是否支持下拉刷新 ,不支持的话就直接不写!
"disableScroll": true, // 设置true不能上下滚动,true/false,注意!只能在 page.json 中有效,无法在 app.json 中设置该项。},"tabBar": { //底部tab或者顶部tab的表现,是个数组,最少配置2个,最多5个
"list": [{ //设置tab的属性,最少2个,最多5个
"pagePath": "pages/index/index", //点击底部 tab 跳转的路径
"text": "首页", //tab 按钮上的文字
"iconPath": "../img/a.png", //tab图片的路径
"selectedIconPath": "../img/a.png" //tab 在当前页,也就是选中状态的路径
}, { "pagePath": "pages/logs/logs", "text": "日志"
}], "color": "red", //tab 的字体颜色
"selectedColor": "#673ab7", //当前页 tab 的颜色,也就是选中页的
"backgroundColor": "#2196f3", //tab 的背景色
"borderStyle": "white", //边框的颜色 black/white
"position": "bottom" //tab处于窗口的位置 top/bottom
},"networkTimeout": { //默认都是 60000 秒一分钟
"request": 10000, //请求网络超时时间 10000 秒
"downloadFile": 10000, //链接服务器超时时间 10000 秒
"uploadFile": "10000", //上传图片 10000 秒
"downloadFile": "10000" //下载图片超时时间 10000 秒
},"debug": true //项目上线后,建议关闭此项,或者不写此项
2. JS 逻辑层
小程序的逻辑层由 JavaScript 语言完成。但因为小程序不在浏览器中运行,所以 JS 在 web 浏览器中的一些函数不能用,如 document、window 等。
app.js 有全局的小程序生命周期,page.js 有自己本页面的生命周期。
2.1 注册小程序 app.js
这一步骤,有这几个需要注意的地方:
必须在 app.js 中,使用 app() 函数注册微信小程序。全局小程序中,只能注册一次;
不能在 app() 内的函数中调用 getApp()(小程序实例),使用 this 就可以拿到小程序的实例;
不要在 onLaunch 的时候 getCurrentPage(),因为此时 page 还没有生成;
通过其他子页面调用 getApp() 获取实例后,不要私自调用小程序全局的生命周期方法;
可以通过 var app=getApp() 获取小程序的实例。
app ( { // 小程序生命周期的各个阶段
onLaunch: function(){},//当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
onShow: function(){},//当小程序启动,或从后台进入前台显示,会触发 onShow
onHide: function(){},//当小程序从前台进入后台隐藏,会触发 onHide
onError: function(){},//当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
// 自定义函数或者属性,用 this可以访问
...
})
2.2 注册小程序的页面 page.js
Page() 用来注册一个页面,维护该页面的生命周期以及数据。
Page({ data: { //页面的初始数据//调用:{{text}} {{array[0].msg}}
text: 'init data', array: [{ msg: '1'
}, { msg: '2'
}]
}, // 页面生命周期的各个阶段
onLoad: function () {}, //生命周期函数--监听页面加载
onShow: function () {}, //生命周期函数--监听页面初次渲染完成
onReady: function () {}, //生命周期函数--监听页面显示
onHide: function () {}, //生命周期函数--监听页面隐藏
onUnload: function () {}, //生命周期函数--监听页面卸载
onPullDownRefresh: function () {}, //页面相关事件处理函数。如果需要监听用户下拉动作,需要 在app.json中配置 "enablePullDownRefresh":"true" 允许上拉刷新
onReachBottom: function () {}, //页面上拉触底事件的处理函数
onShareAppMessage: function () { //用户点击右上角分享
return { title: '自定义分享标题', desc: '自定义分享描述', path: '/page/user?id=123'
}
}, // 自定义函数或者属性如:
customData: { hi: 'MINA'
}...
})
2.3 公共模块 util.js
公共模块方法需要通过 module.exports 对外暴露接口,使用的时候需要利用 require(path),将文件引入。如:
function sayHello(name) {//公共方法util类
console.log(`Hello ${name} !`)
}module.exports.sayHello = sayHello//用module.exports 对外暴露接口
//先引入文件,是新建的一个 utils 包,公共方法在 util.js 里面var util = require('../../utils/util.js')
Page({//调用类
onLoad: function () {// 使用时,用 util 引用名调用,如:util.sayHello()
util.sayHello('我是传的值');
}
})
2.4 数据操作
setData() 不能直接操作数据,例如 this.data.text="xxxxx" 就是错误的。你需要在 this.setData () 之中,进行数据的操作。
同时,这里有作用域的问题。比如,需要在局部函数中使用,就需要 .bind(this)。
如果你需要操作全局的数据,你需要在 app.js 中进行相应设置,例如:
App({// app.js
globalData: 1})// 某 page.jsconsole.log(getApp().globalData)
3. 视图层 WXML
视图层的数据绑定均来自于 Page 中的 data,想要修改相应值,你需要用到 this.setData。数据绑定使用两对花括号,将变量名包起来。
3.1 条件渲染
你可以利用 if 和 else,在视图层上编写在特定情况下,出现的不同的视图结果。
view wx:if="{{zhenjiaa=='123'}}"123334/viewview wx:if="{{zhanjia}}"123334/viewview wx:if="{{len 5}}"大于5我就显示了 /viewview wx:if="{{length 5}}" 1 /viewview wx:elif="{{length 2}}" 2 /viewview wx:else 3 /viewblock wx:if="{{true}}"view view1 /viewview view2 /view/block
很多人会将 CSS 中的 display: hidden 属性,将其做一个比较。
微信小程序中的 wx:if 是惰性的。如果不符合渲染条件,它不会渲染相应部分;
使用 display: hidden 时,元素始终渲染,只是视图层上没有显示,用户看不见。
如果你的小程序有元素显示频繁切换的需求,建议你使用 display: hidden,能够为用户提供能顺畅的使用体验。
3.2 列表渲染
相当于让 WXML 处理一个循环。
在 WXML 中,你可以这样来建立一个 for 循环:
view wx:for="{{array}}" {{index}}:{{item}} /view
然后在相应的 JS 中,新建一个数组:
page.jsPage({ data: {
array: [1, 2, 3, 4, 5]
}
})
需要注意的是,如果列表中的项需要动态添加到列表中,并希望项目保持原有的特征和状态,那么你应该使用 wx:key。
wx:key 有两种形式:
字符串:wx:key="unique"
保留关键字:wx:key="*this"
3.3 运算
WXML 可以执行简单的运算任务。例如:
view {{a + b}} + {{c}} + d /view
也可以做到字符串拼接:
view{{"hello" + name}}/view
甚至,你可以使用 ... 在 WXML 中展开对象。
3.4 模板
name 定义组件模版的名称,引用模版的时候使用 is 属性指定模版的名字,is 可以进行简单的三目运算,需要传入模版需要的 data 数据。
因为模版拥有自己的作用域,所以只能使用 data 传入数据,而不接受双花括号的写法。
template name="msgItem"viewtext {{index}}: {{msg}} /texttext Time: {{time}} /text/view/template!-- 其他代码 --template is="msgItem" data="{{...item}}"/
3.5 公共模块的引用
WXML 提供 import 和 include 两种文件引用方式。
import 有作用域的概念,不能多重引用。
!-- B.wxml --import src="a.wxml"/!-- A.wxml --template name="A"
text A template /text/template
而 include 就可以多重引用了。
!--引用 header、其中 header.wxml 中也引用了 footer.wxml--include src="header.wxml"/view body /view!-- header.wxml --view header /viewinclude src="footer.wxml"/
3.6 事件
名称以 bind 开头的事件不阻止冒泡,名称以 catch 开头的事件冒泡是阻止的。如 bindTap 和 catchTab。
在 WXML 中,可以使用 dataset 定义 data 中的数据,会通过事件传递。它的事件以 data- 开头,多个单词以 - 链接,如 data-a-b。
需要注意的是,使用这种方式定义的变量不能有大写。它会自动转成驼峰命名,调取的时候去驼峰命名的名字。
4. WXSS
WXSS 的用法类似于 CSS,并在 CSS 的基础上,扩展了 rpx 尺寸单位和样式导入功能。
WXSS 可以使用内联样式,但这样会影响渲染速度。
每个页面自己的 page.wxss 样式表,会覆盖全局样式表 app.wxss。
微信小程序如何开发
微信版本升级后,打开微信,点击底部的“发现”这个菜单项,就会发现升级后的“发现”菜单里,增加了“小程序”这样一个功能。
2.点击打开小程序后,可以看到有附近的小程序和我的小程序,附近的小程序是所在定位周边的小程序。
下面的小程序列表可以看到的是我们之前打开过的一些小程序,如果有自己觉得很好用的小程序就可以点击左上角,添加到我的小程序里面。
3.微信小程序还有具有搜索功能,打开搜索页面可以输入想要找的小程序。
关于小程序开发常见问题和小程序常见问题汇总,方便自己看的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。