UI圖：

為方便用戶使用，提問頁即為首頁。提問頁有問題輸入框、問題描述輸入框、圖片上傳、提交/重置表單元素。

index.wxss代碼：

1. /**index.wxss**/
2. page{
3. background-color: #efeff4;
4. }
5. .container{
6. padding:0px;
7. }
8. .container .tip{
9. width: 100%;
10. background-color: #FFFFFF;
11. margin-bottom: 10px;
12. }
13. .container .tip text{
14. display:block;
15. padding: 10px;
16. text-align: center;
17. font-size: 14px;
18. line-height: 30px;
19. }
20. .container .form{
21. width: 100%;
22. height:100%;
23. background-color: #FFFFFF;
24. }
25. .container .form form{
26. height:100%;
27. display: block;
28. padding: 10px;
29. text-align: center;
30. }
31. .container .form form .section{
32. text-align: left;
33. margin: 10px 0px;
34. }
35. .section.upload{
36. margin: 20px 0px!important;
37. }
38. .img-upload{
39. height: 100%;
40. width: 100%;
41. position: relative;
42. }
43. .img-upload .img-icon-box{
44. display: inline-block;
45. margin:0px 20px 15px 0px;
46. }
47. .img-upload icon{
48. position: absolute;
49. margin: -15px 0px auto 80px;
50. }
51. .img-upload .img-box{
52. border: 1px #eee solid;
53. }
54. .img-upload image{
55. width: 80px;
56. height: 80px;
57. }
58. input{
59. width: 95%;
60. border-radius: 5px;
61. border: 1px #eee solid;
62. font-size: 14px;
63. padding: 2%;
64. }
65. textarea{
66. width: 95%;
67. border-radius: 5px;
68. border: 1px #eee solid;
69. height: 100px;
70. font-size: 14px;
71. padding: 2%;
72. }
73. .container .form form .btns{
74. width: 100%;
75. }
76. /*版權(quán)*/
77. .copyright{
78. height:40px;
79. line-height: 40px;
80. color:#8f8f94;
81. font-size:12px;
82. float: left;
83. bottom: 20px;
84. }
85. /*字體圖標(biāo)*/
86. @font-face {
87. font-family: iconfont;
88. /*字體base64 https://transfonter.org/*/
89. src: url(data:font/truetype;charset=utf-8;base64,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A0NgWbADJbCAYmGwAiVGYTgjIDwjOBshICBGI0ewACsjYTghWbEkARQrLbA7LLAuKy6xJAEUKy2wPCywLyshIyAgPLAEI0IjOLEkARQrsARDLrAkKy2wPSywABUgR7AAI0KyAAEBFRQTLrAqKi2wPiywABUgR7AAI0KyAAEBFRQTLrAqKi2wPyyxAAEUE7ArKi2wQCywLSotsEEssAAWRSMgLiBGiiNhOLEkARQrLbBCLLAJI0KwQSstsEMssgAAOistsEQssgABOistsEUssgEAOistsEYssgEBOistsEcssgAAOystsEgssgABOystsEkssgEAOystsEossgEBOystsEsssgAANystsEwssgABNystsE0ssgEANystsE4ssgEBNystsE8ssgAAOSstsFAssgABOSstsFEssgEAOSstsFIssgEBOSstsFMssgAAPCstsFQssgABPCstsFUssgEAPCstsFYssgEBPCstsFcssgAAOCstsFgssgABOCstsFkssgEAOCstsFossgEBOCstsFsssDArLrEkARQrLbBcLLAwK7A0Ky2wXSywMCuwNSstsF4ssAAWsDArsDYrLbBfLLAxKy6xJAEUKy2wYCywMSuwNCstsGEssDErsDUrLbBiLLAxK7A2Ky2wYyywMisusSQBFCstsGQssDIrsDQrLbBlLLAyK7A1Ky2wZiywMiuwNistsGcssDMrLrEkARQrLbBoLLAzK7A0Ky2waSywMyuwNSstsGossDMrsDYrLbBrLCuwCGWwAyRQeLABFTAtAABLuADIUlixAQGOWbkIAAgAYyCwASNEILADI3CwDkUgIEu4AA5RS7AGU1pYsDQbsChZYGYgilVYsAIlYbABRWMjYrACI0SzCgkFBCuzCgsFBCuzDg8FBCtZsgQoCUVSRLMKDQYEK7EGAUSxJAGIUViwQIhYsQYDRLEmAYhRWLgEAIhYsQYBRFlZWVm4Af+FsASNsQUARAAAAAAAAAAAAAAAAAAAAAAAAAAAMgAyAxj/4QNY/6gDGP/hA1j/qAAAAAAAAAAAATwCMAAFACz/4QO8AxgAFgAwADoAUgBeAXdLsBNQWEBKAgEADQ4NAA5mAAMOAQ4DXgABCAgBXBABCQgKBgleEQEMBgQGDF4ACwQLaQ8BCAAGDAgGWAAKBwUCBAsKBFkSAQ4ODVEADQ0KDkIb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) format(truetype);
90.  
91. }
92.  
93. .iconfont {
94. font-family:iconfont !important;
95. font-size:16px;
96. font-style:normal;
97. -webkit-font-smoothing: antialiased;
98. -webkit-text-stroke-width: 0.2px;
99. }
100. .icon-zengjia:before { content: e64e; }

index.js代碼：

1. var app = getApp();//初始化實例
2. var functions = require(../../function.js);//引入公共函數(shù)庫
3. var Promise = require(../../es6-promise.min.js);//引入ES6
4. var imgUrls=Array();
5. Page({
6. //初始化數(shù)據(jù)
7. data: {
8. },
9. onLoad: function () {
10. var that = this;
11. //更新用戶信息
12. var getUserInfo = function(){
13. return new Promise(function(resolve,reject){
14. app.getUserInfo();
15. resolve();
16. });
17. };
18. getUserInfo().then(function(){
19.  
20. });
21. },
22. //分享
23. onShareAppMessage: function () {
24. return {
25. title: 搜問網(wǎng),
26. desc: 一鍵提交問題，坐等答案自動推送到您的微信上。,
27. path: pages/index/index
28. }
29. },
30. //下拉刷新
31. onPullDownRefresh: function(){
32.  
33. wx.stopPullDownRefresh();
34. },
35. //選擇圖片
36. chooseImage:function(){
37. var that=this;
38. wx.chooseImage({
39. count: 1,
40. sizeType: [compressed],
41. success: function(res){
42. var tempFilePaths = res.tempFilePaths;
43. console.log(tempFilePaths);
44. wx.uploadFile({
45. url: https://www.soswen.com/weixin/Question/upload, //僅為示例，非真實的接口地址
46. filePath: tempFilePaths[0],
47. name: file,
48. header: {
49. content-type: multipart/form-data
50. },
51. success: function(res){
52. var data = JSON.parse(res.data);
53. if(data.status){
54. console.log(data.data);
55. imgUrls.push(data.data);
56. that.setData({
57. imgUrls:imgUrls
58. });
59. console.log(imgUrls);
60. }else{
61. console.log(res);
62. }
63. },
64. fail:function(res){
65. console.log(res);
66. }
67. });
68. }
69. });
70. },
71. //預(yù)覽圖片
72. previewImage:function(e){
73. wx.previewImage({
74. current:e.currentTarget.dataset.src,
75. urls: imgUrls
76. });
77. },
78. //刪除圖片
79. delImage:function(e){
80. console.log(e.currentTarget.dataset.key);
81. var tempimgUrls=Array();
82. for(var i=0;i