mpvue小程序开发（八）：项目开发

喜欢ヅ旅行 2022-10-02 14:49 297阅读 0赞

嗯，前面把各种配置啊，结构啊都看了，【[点击查看][Link 1]】现在我们要正式开发一个小程序了，今天我们打算开发一款考试的小程序

start……

一：样式引入

在src目录下新建static/css目录，再把样式文件丢进去，然后再main.js中引入

【样式下载地址【[点击获取][Link 2]】[https://download.csdn.net/download/stronglyh/11252782][Link 2]】

![20190621210944975.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0cm9uZ2x5aA_size_16_color_FFFFFF_t_70][]

二：页面配置

新建页面，并在app.json中添加新路径，同时配置底层tab【注意：一定配置页面，只要是页面的都需要在app.json中配置路径】

![20190621211250629.png][]![20190621211339236.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0cm9uZ2x5aA_size_16_color_FFFFFF_t_70 1][]

三：代码编写

exam目录下main.js

import Vue from 'vue'
    import App from './index'
    
    // add this to handle exception
    // Vue.config.errorHandler = function (err) {
    //   if (console && console.error) {
    //     console.error(err)
    //   }
    // }
    
    const app = new Vue(App)
    app.$mount()

exam目录下index.vue

<template>
      <div class="cu-form-group margin-top">
        <form style="width:750px">
          <span>{
       {eaxmData[count]['question']}}</span>
          <radio-group class="block" @change="RadioChange">
            
    				<div class="cu-form-group" v-for="(item, itemIndex) in eaxmData[count]['eaxm'+count]">
    					
    					<radio class='red radio' value="item['option']"></radio>
    					
              <div class="option">{
       {item['option']}}-{
       {item['data']}}</div>
    				</div>
          </radio-group>
          <div class="padding flex flex-wrap justify-between align-center bg-white">
    				<button class="cu-btn" @click="clickPrev" :disabled="count==0?true:false">上一题</button>
            <button class="cu-btn" @click="clickNext" :disabled="eaxmData.length==count+1?true:false">下一题</button>
          </div>
        </form>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            count:0,
            aaa:['bbb','ccc'],
            eaxmData : [{'eaxm0':[{'option':'A','data':'猛虎，我是来试这个长度的，不要怕怕哦'},
    						{'option':'B','data':'长征，============'},
    						{'option':'C','data':'东方，1111111111'},
    						{'option':'D','data':'红旗，22222222222'}],"question":'你觉得最帅的名字是哪个？'
    					},{'eaxm1':[{'option':'A','data':'九天之上'},
    						{'option':'B','data':'天涯海角'},
    						{'option':'C','data':'海角天涯'},
    						{'option':'D','data':'天下'}],"question":'不知兄台家住哪里？'
            }
            ],
            radio:''
          };
        },
        methods: {
          RadioChange(e) {
            this.radio = e.target.value
            console.log(this.radio)
          },
    			clickPrev(){
    				this.count--
    			},
    			clickNext(){
    				this.count++
    				if(this.count==this.eaxmData.length){
    					console.log(this.count)
    				}
    			}
        }
      }
    </script>
    
    <style>
      .cu-form-group .title {
        min-width: calc(4em + 15px);
    
      }
      .cu-form-group .option {
        text-align:left;
        padding-left:30rpx;
        padding-right:10rpx;
    		Float:left;
      }
      .cu-form-group{
        justify-content:normal;
      }
    
    </style>

四：编译运行

在cmd命令行中进入到目录下，并执行 npm run dev命令

![20190621211727437.png][]

我这个地方因为项目名字中途改了，所以跟前面不一样

最后来到微信开发者工具查看

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0cm9uZ2x5aA_size_16_color_FFFFFF_t_70 2][]

嗯，开发成功了，鼓掌

[Link 1]: https://blog.csdn.net/stronglyh/article/details/92805461
[Link 2]: https://download.csdn.net/download/stronglyh/11252782
[20190621210944975.png]: /images/20220109/89196c5adbb14341a2f060d9cf0135c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0cm9uZ2x5aA_size_16_color_FFFFFF_t_70]: /images/20220109/38a126d75a3840738c66cb64efa7ae35.png
[20190621211250629.png]: https://img-blog.csdnimg.cn/20190621211250629.png
[20190621211339236.png]: /images/20220109/43731003de6d41f8aec192ee735cf545.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0cm9uZ2x5aA_size_16_color_FFFFFF_t_70 1]: /images/20220109/696d0e3477dc41f38de8c458ba4d68ad.png
[20190621211727437.png]: /images/20220109/a7dc140ce4374360b2b2a55930a00a2b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0cm9uZ2x5aA_size_16_color_FFFFFF_t_70 2]: /images/20220109/ee69405b8ba848dc83257de5fbf9e022.png