小程序——沪江问答（这是什么小程序）

小程序——沪江问答（这是什么小程序）

HuJiangTeach

小程序--沪江问答

初窥

从一个hello world开始

微信开发者工具生成 目录如下：

.|-- app.js|-- app.json|-- app.wxss|-- pages | |-- index # 主页| | |-- index.js| | |-- index.json| | |-- index.wxml| | `-- index.wxss| `-- log # 日志页面| | |-- log.js| | |-- log.json| | |-- log.wxml| | `-- log.wxss`-- utils # 工具 `-- util.js

大体为: 每一个page即是一个页面文件 ，每个页面有一个js/wxml/wxss/json文件 规定：描述页面的这四个文件必须具有相同的路径与文件名。 全局下同路，为公共的逻辑，样式，配置 与html不同:用view text navigator 代替 div span a

开发者文档走马观花

app.json: 注册pages window tabBar networkTimeout 组件说明 *.js: 作为逻辑层 与wxml交互 有着丰富的 网络，媒体，文件，数据缓存，位置，设备，界面...的api 官方文档 *.wxml: 数据驱动的视图层 + 微信提供了大量的组件 表单 导航 媒体 ...

一切具备 马上动工

生成目录

.|-- app.js|-- app.json|-- app.wxss|-- common.js #公用js|-- images #存放项目图片|-- style|   |-- weui.wxss   # 引入weui样式  万一你自己不想写css样式呢|-- pages|   |-- search   # 首页|   |   |-- search.js| | |-- search.json| | |-- search.wxml| | `-- search.wxss|   |   |--search # 搜索|   |   |   |-- search.js|   |   |   |-- search.json|   |   |   |-- search.wxml|   |   |   `-- search.wxss|   |--square   # 广场|   |   |-- square.js|   |   |-- square.json| | |-- square.wxml| | `-- square.wxss|   |   |--question # 提问|   |   |   |-- question.js|   |   |   |-- question.json|   |   |   |-- question.wxml|   |   |   `-- question.wxss|   |--topics  # 话题|   |   |-- topics.js| | |-- topics.json| | |-- topics.wxml| | `-- topics.wxss|   |--user   # 我的|   |   |-- user.js|   |   |-- user.json| | |-- user.wxml| | `-- user.wxss|   |   |--register # 注册登录|   |   |   |-- register.js|   |   |   |-- register.json|   |   |   |-- register.wxml|   |   |   `-- register.wxss|   |   |--user-index # 用户|   |   |   |-- user-index.js|   |   |   |-- user-index.json|   |   |   |-- user-index.wxml|   |   |   `-- user-index.wxss| `-- log # 日志页面`-- utils # 工具 `-- util.js

请先在在app.json中注册页面，设置navigation，配置tabbar

{ "pages": [ "pages/search/search", "pages/search/search/search", "pages/square/square", "pages/square/question/question", "pages/topics/topics", "pages/user/user", "pages/user/register/register", "pages/user/user-index/user-index" ], "window": { "backgroundTextStyle": "light", "backgroundColor": "#fff", "navigationBarBackgroundColor": "#11CF7E", "navigationBarTitleText": "沪江问答", "navigationBarTextStyle": "black", "enablePullDownRefresh": "true" }, "tabBar": { "color": "black", "selectedColor": "#19FA28", "backgroundColor": "#ffffff", "borderStyle": "black", "list": [{ "pagePath": "pages/search/search", "text": "搜索", "iconPath": "images/search.png", "selectedIconPath": "images/search_selected.png" }, { "pagePath": "pages/square/square", "text": "广场", "iconPath": "images/square.png", "selectedIconPath": "images/square_selected.png" }, { "pagePath": "pages/topics/topics", "text": "话题", "iconPath": "images/topics.png", "selectedIconPath": "images/topics_selected.png" }, { "pagePath": "pages/user/user", "text": "我的", "iconPath": "images/user.png", "selectedIconPath": "images/user_selected.png" } ] }}

1.block对数据的渲染

//jsvar status = true;Page({ data: { types: ['英语', '日语', '韩语', '法语'], English: ['英语词汇', '英语口语', '英语阅读', '综合能力', '四六级', '专四专八', '商务英语', '翻译考试', '考研英语', '留学考试', '其他考试', '影视娱乐', '原版书', '欧美文化' ], Jan: ['初级日语', '日语教材', '日语听说读写', '日语翻译', 'N1', 'N2', 'N3N4N5', '其他日语考试', '日本留学'], Koa: ['韩语入门', '韩语口语', '韩语翻译', '留学就业', 'TOPIK初级', 'TOPIK中高级', '其他考试', '韩剧韩综'], France: ['法语语法', '法语考试', '留学法国', '翻译互助', '法国文化', '法国口语', '法语听力', '法语写作', '法语语音', '法语词汇' ], currentTab: 0, current: 0 }, toastShow: function(event) { console.log("提交成功"); status = false this.setData({ status: status })　　　　 //setData方法可以建立新的data属性，从而起到跟视图实时同步的效果 setTimeout(function() { wx.navigateBack({ url: '/pages/search/search/search' }) }, 3000); }, toastHide: function(event) { status = true this.setData({ status: status }) }, navbarTap: function(e) { this.setData({ currentTab: e.currentTarget.dataset.idx }) }, currentTap: function(e) { this.setData({ current: e.currentTarget.dataset.idx }) }})

2.用flex布局实现tabbar的布局

//jsvar app = getApp();Page({ /** * 页面的初始数据 */ data: { navbar: ['最热', '最新'], currentTab: 0, areaIndex: 0, area: ['英语', '日语', '韩语', '法语'], hotest: [{ id: 0, 'url': 'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1501136220&di=9e545f019ff063f2e2d40ff093e69ca4&imgtype=jpg&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fcaef76094b36acaf90900d7d76d98d1001e99c3b.jpg', 'name': '暗香疏影49938', "type": '综合能力', "text": '我住在宿舍里，学校宿舍没有网，沪江的课程可以-到手机里离线听吗？', "apply": '6人回答' }, { id: 1, 'url': 'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1501136231&di=df09010b54644a6d6de64813e448295a&imgtype=jpg&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F63d0f703918fa0ec7f92ff8c2c9759ee3c6ddbde.jpg', 'name': '青涩不及当初', "type": '英语词汇', "text": '一般英语考什么？', "apply": '4人回答' }, { id: 2, 'url': 'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1501135857&di=fa29ccd79a69991fed6e61aa53a2636a&imgtype=jpg&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F562c11dfa9ec8a13165ec961fd03918fa1ecc0ef.jpg', 'name': '暗香疏影49938', "type": '综合能力', "text": '我住在宿舍里，学校宿舍没有网，沪江的课程可以-到手机里离线听吗？', "apply": '6人回答' }, { id: 3, 'url': "https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1501135905&di=f05bd295743084fe249d3727169d58fb&imgtype=jpg&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F5ab5c9ea15ce36d371ed1db130f33a87e850b142.jpg", 'name': '老老', "type": '综合能力', "text": '王翰怎么说？', "apply": '4人回答' } ], newest: [{ id: 0, 'url': 'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1501136337&di=3901868532c26c893342ba8746ce3c07&imgtype=jpg&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F94cad1c8a786c9177d1fc8b8c33d70cf3bc75716.jpg', 'name': 'urtv4ihuysk', "type": '英语口语', "text": '学口语是不是要词汇量足？基础好？', "apply": '待回答' }, { id: 1, 'url': 'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1501136325&di=b58a79af6074b024887dccba02cdb91d&imgtype=jpg&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fe61190ef76c6a7ef1d0732a7f7faaf51f3de660a.jpg', 'name': 'uku6ezbexruk', "type": '欧美文化', "text": '有首歌开始是oh~so damn i.got feeling you,i got feeling ah no no no 然后是一段一个男的唱的rap这是什么 ？', "apply": '待人回答' }, { id: 2, 'url': 'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1501135997&di=b744bfb0dc901894d893a416377e3f2f&imgtype=jpg&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F03087bf40ad162d99d67fb9d1bdfa9ec8b13cda2.jpg', 'name': '雨亦是泪', "type": '英语口语', "text": '2017.07.16的每日一句有个单词发音错了。says应该是发[se-z]不是[sei-z。say原型发[sei],says/said发[se-z]。', "apply": '6人回答' }, { id: 3, 'url': "https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1501136315&di=0debe0cdc33a5f7997a6a3e9ba682e51&imgtype=jpg&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F77094b36acaf2edd1d88d368871001e939019332.jpg", 'name': '夜晚星辰79867', "type": '英语词汇', "text": '王翰怎么说？', "apply": '4人回答' } ] }, navbarTap: function(e) { this.setData({ currentTab: e.currentTarget.dataset.idx }) }, bindPickerChange: function(e) { this.setData({ areaIndex: e.detail.value }) }, ask: function() { wx.navigateTo({ url: '/pages/square/question/question' }) },})

踩过的坑

刚接触小程序，讲真，刚开始他一脸懵逼，无从下手啊，在网上找了几个例子，看了下，自己开始照猫画虎。也顺利的完成了一个对自己来说小小的项目吧。

1.flex布局的问题

刚开始不是很了解，一直得不到想要的效果，看了flex布局,自己也对display的几个属性值做了下总结,来自前端菜鸟对 css display属性的理解,不足的地方还请老司机们指正。

2.对于数据存储的问题

这里给自己挖了个超级大的坑，在本地存储了好多图片（自己做数据嘛，好多头像只能自己搞定了），我擦，在上传到github上面的时候，死活上不去，查来查去，数据他多了，好吧，这样的话，老铁们，那就不要存在本地，悲催，还是老老实实写网址吧。

3.navigator的跳转

navigator也就相当于html中的a标签，但是我觉得啊，它们还是有差距的，只要看到跳转，是不是就想到navigator。但是呢，不要在一个页面反复使用它，不然它跳不过去啊。我觉得有必要看一波navigator，了。对于有些页面的跳转，没必要全部写navigator，可以在它们的标签里面给它们绑定事件，我觉得这样会更好。wx.navigateTo，wx.redirectTo，wx.switchTab，wx.reLaunch，wx.navigateBack等来实现页面跳转。

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